iPhone SE から iPhone 16 Pro Max までのビューポートサイズ

iPhoneビューポートサイズの変遷

AppleのiPhoneラインナップは、幅広いCSSビューポートサイズにまたがっています。iOSユーザーはモバイルWebトラフィックの大きな割合を占めるため、これらのサイズを理解することはWeb開発者にとって不可欠です。

主要なiPhoneビューポート幅

世代	CSS幅	CSS高さ	DPR
iPhone SE (第1世代)	320px	568px	2x
iPhone 6/7/8	375px	667px	2x
iPhone X/XS/11 Pro	375px	812px	3x
iPhone 12/13	390px	844px	3x
iPhone 14 Pro	393px	852px	3x
iPhone 15	393px	852px	3x
iPhone 16 Pro Max	440px	956px	3x

一般的な幅のクラスター

iPhoneのCSSビューポートはいくつかの主要な幅にクラスタリングされます：320px（レガシー）、375px（広く使用）、390-393px（現在の標準）、428-440px（Pro Maxモデル）。モバイルブレークポイント設計時に375pxをベースラインとすると、使用中のiPhoneの大多数をカバーできます。

DPRの考慮事項

すべての最新iPhoneはDPR 3を使用しており、各CSSピクセルは3x3の物理ピクセルグリッドでレンダリングされます。393px幅のビューポートの物理解像度は1179ピクセルになります。すべてのモデルで鮮明なレンダリングを実現するには、2xおよび3x解像度の画像とアイコンを提供する必要があります。

セーフエリアインセット

iPhone Xでノッチ（その後Dynamic Island）が導入されて以来、開発者はセーフエリアインセットを考慮する必要があります。CSSのenv(safe-area-inset-top)とenv(safe-area-inset-bottom)変数を使用して、コンテンツがハードウェア機能によって隠されないようにします。