CSSピクセルと物理ピクセル
高密度画面では複数の物理ピクセルが1 CSSピクセルを描画します。メディアクエリはCSS viewportを基準にし、画像やCanvasでDPRを別に扱います。
基本テストセット
少数でも境界を発見しやすい組み合わせです。
- 360×780：細いAndroid
- 375×667：小型iPhone
- 393×852：標準スマホ
- 430×932：大型スマホ
- 768×1024：タブレット
- 884×1104：折りたたみ／ワイド
プリセット間で崩れる位置を探す
一方で成功し次で失敗する場合、カスタム幅で最初に崩れる位置を探します。固定幅や改行できないラベルが原因のことが多いです。
横向きと文字拡大
横向きスマホは高さが小さく、固定ナビや同意メッセージが画面を占有します。文字を拡大しても操作できるか確認します。