モバイル表示は、スクリーンショットと数値で確かめる

レスポンシブデザインの確認は、端をドラッグして幅を変えるだけでは足りない。ブラウザUIを含む高さ、端末の安全領域、タップ中のアニメーションは、同じ幅でも結果を変える。

このサイトでは、390×844の縦型、412×915のPixel 6a相当、932×360の超横長、1280×900のPCを基準にしている。すべてを網羅する値ではなく、壊れ方が異なる代表点として選んでいる。

途中の状態を測る

ページを開いた直後だけでなく、タップから約100ms後と、演出終了後も確認する。見る値は、レイアウト幅、表示幅、倍率、ルートと本文のスクロール幅だ。

正常に見えても、アニメーション中だけscrollWidthが増えていれば、実機で縮小や横ずれにつながる可能性がある。反対に、スクリーンショットに問題があり、数値が正常なら、合成レイヤーやセンサー開始のタイミングを疑える。見た目と数値を組み合わせると、端末固有に見える問題を構造の問題として切り分けやすい。