Happyとコメントの文字が重なっている…
マイネ王ヘッダのTodaysHappy
Happyの文字とコメントが重なっている…
これは、僕のスマホがiPhoneSEだからなのか…？
マイネ王メンバーの皆さん、あなたのスマホでは、どのように表示されてますか？
僕と同じような表示になってませんか？
皆さんのコメントによっては、
アイデアファームで、対応を依頼したいと思います。
可能であれば、
・端末
・画面サイズ
・OS
・ブラウザー
など、情報を添えてコメントいただけると幸いです。
ちなみに僕は、
iPhoneSE
4インチ
iOS 11.4.1
Safari
文字の大きさはデフォルト
です。
50 件のコメント
コメントするには、ログインまたはメンバー登録（無料）が必要です。
ありゃ？直った…スタイルシートの問題か？
コメントにHappyを混ぜる演出と思ってスルーするのってずるい？
^_^
普通です！原因はなんですか？
だからコメントしましたよ。
またなった…あ、実況です。
QAに書いても、明確な回答は得られないでしょう。
発生条件が分かれば、運営も対応しやすいと思います。
助言、ありがとうございます。
冒頭の文言を変更しました。
継続中…原因はソースを見ないと分かりませんし、見ても分からない可能性が高いと思います。
とは言え、原因究明が目的ならTS801661000さんの仰るようにQA投稿も一つの手段です。
想像なので的外れかもしれません。
Happyカウンターの幅を%指定してるとしたら、特定サイズ以下（例えば4インチ以下など）の場合に例外処理などで対応していて、デフォルトの書式だとご掲載画像のようにレイアウトが崩れるのかもしれません。
この場合、通常はデフォルト処理→例外処理でレイアウトを整えているため、ユーザーができる対応はリロードや文字サイズ変更が可能であれば小さくするとかでしょうか？
（設定の文字サイズが一律でどのブラウザーにも適用されるかは調べていません）
場合によって、設定値の微調整で直るかもしれませんが、他への影響を考えると変更には予想以上に工数がかかる場合もあります。
設定で文字サイズとか変更したら発生しなくなるとかないですかね？
私もSE…・端末
・画面サイズ
・OS
・ブラウザー
など、アンケート取れると、発生の要件定義の助けになりそう。
（5インチ以上は発生していないような気がします）
やるならフリートークでアンケート願います…
長々と失礼いたしました。
やるならフリートークでアンケート願います…
ルシータさん、コメントありがとうございます。
そうですね、アンケートの欠点を失念していました。
申し訳ありません。
じゃ、ふみえもんさん後よろしくお願いします。
SEで縦から…
SEで画面を横にすると…直る
SEでSafari使っている人限定かも？
もしなければ、iOS iPhone SE Safariの利用率をログ解析で算出して、一定比率の閲覧者がいるなら、運営のご対応には頑張っていただきたいですね。
>SEで画面を横にすると…
直る
5インチ以上のiOS スマフォとタブレットでも、Happyカウンターの横にスペースがあるので、現在のところ大丈夫な感じです。
横から縦で再発するならちょっとやばそう、直るなら暫定的な復旧方法になりますね。
再発します。
横にした時だけ、ラップが解消されます。
> SEで画面を横にすると…直る
ヘッダが横長になって、表示スペースが確保できるので、直るんでしょうね。
4インチディスプレイだと、横幅がキツキツなのかな…
まぁ、なったことないという方もいらっしゃるので、なんとも言えませんが…
CSS（カスケードスタイルシート）で設定していて、そちらが上位制御なんですね。
あとはブラウザーをChromeにすると大丈夫とか？でしょうかね。
運営は何シレッといじったんでしょうか…？
のところにCSSとして
float: left;
が適用されているようなので、横幅と文字数の兼ね合いで入りきらなかったら
Happy
の部分だけ改行して下の行に配置されてしまっていますね。
Happyの数が5桁になって表示幅が増えた関係もあって、「Happy」が下の行に回ってしまいやすくなっています。
表示に使用している文字フォントとの兼ね合いもありますが、横幅320px弱あたりで発生しますね。
直せなくは無いと思うけど、コーダー泣かせかも。
運営は何シレッといじったんでしょうか…？
最初に思いつくのは、どこか他の箇所の修正対応。
その影響でその箇所は直ったけど、他に影響が出た？とかでしょうか。
あぁ、こういうことでしたか。
Today:0000
↓
Today:00000
しあわせのしわよせ？
ここを詰めるだけで…
現実としては世の中のすべての端末で「一切の乱れなく表示」はかなり厳しいので、私は閲覧するのに大きな支障がない範囲は「寛容に」と思っています。
・これまた微妙だけど「Today:」を「12/31 」などに変更
・「Today:」の左余白を2/3程度に減らす
・「寛容に」なるよう努める
TodayとHappyでバランスとってるでしょうから、できるだけTodayを残したいでしょうね。
継続中…マージン設定などを調整しないと継続でしょうね残念ながら。
問題は4インチiPhone Safariユーザーの表示崩れの対応をいつできるか、でしょうか。
HAPPY METERって普段は4桁(9999以下)なのですが、21日はフリータンクの引き出し解禁日で普段の何倍にも増えてしまうのでこのような結果になっていますね。明日には、4桁に戻って、表示の崩れも戻るので、今日は生温かく見守ることにしましょう。
ただ、5桁で表示崩れは余りにも想定が甘いので、折を見て調整はしてもらった方が良いですね。
619_ak@mnemo さんが書かれているように
・「Today:」の左余白を2/3程度に減らす
であれば、見た目の変化も少なくリスクもほぼ無いので。
ということで試してみた結果を画像をアップします。
今日になって急にオーバーラップしたのはフリータンク解放が起因のHAPPY METERの4桁超えが原因でしたか…
要するに画面設計の想定が甘かったと…
謎が解けました…ご教示ありがとうございました…
もう直った…？プロポーショナルフォントだから、また別の数字になったらきっと再発だ…
やっぱし…設計ミスを粋な計らいに変える魔法の言葉
まぁ、良いことと言えば…
アプリで開くと出ないような気がします。
アプリでもそうなります。
というか、アプリの話です。