スマホ向けのWebデザインを考える際、画面幅の目安を知ることは非常に重要です。最近のスマホは高解像度ディスプレイを搭載しているため、単純に物理的なピクセル数だけで判断するのは難しく、CSSで扱う「ビューポート幅（CSSピクセル）」を基準に設計するのが一般的です。
スマホの横幅（ビューポート幅）の目安
多くのスマホのビューポート幅は320pxから428px程度です。例えば、iPhone SE（第2世代）は375px、iPhone 14 Proは430px前後です。Android端末では360px〜412px程度のものが多く見られます。
ビューポート幅がCSSピクセルで表されるため、物理的な画素数（解像度）は高くても、CSS上の横幅は一般的に400px前後として扱うことができます。
MAX-width 700pxの適用範囲
CSSでmax-width:700pxを設定した場合、多くのスマホには十分に適用されます。iPhoneや標準的なAndroidでは700pxを超えるビューポート幅はほとんどなく、タブレット以上の大画面でのみ700pxを超えることが一般的です。
そのため、スマホ向けのレスポンシブCSSを考える場合、700px以下でデザインを調整すれば、多くの端末で意図した表示が可能です。
デザインのポイント
高解像度ディスプレイでは、画像やアイコンが物理ピクセルでシャープに表示されるように、retina対応画像を用意するのが望ましいです。また、メディアクエリでmax-width:700pxを設定し、スマホ表示に合わせたレイアウトを設計することで、幅広い端末に対応できます。
まとめ
スマホの横幅はビューポート幅で320〜430px程度が目安であり、CSSでmax-width:700pxを設定すれば、ほとんどのスマホに対応可能です。物理解像度の高さに惑わされず、ビューポート幅を基準にレスポンシブデザインを設計することが重要です。
コメント