現行のiPhoneの画面サイズは6.1〜6.9インチで、CSSビューポートの幅は390〜440pxです。iPhone 18 ProとiPhone 17は6.3インチでビューポートは402 × 874、iPhone 18 Pro Maxと17 Pro Maxは6.9インチで440 × 956、iPhone 17eは6.1インチで390 × 844です。以下の表では、初代iPhone SEまでさかのぼって全機種を掲載しています。
表の見方
- 画面はAppleが公表している対角線の長さ（インチ）です。角が丸い機種では、実際の表示領域は少し小さくなります。
- 解像度はディスプレイの物理的なピクセル数（縦向き）です。
- CSSビューポートは、正しいviewportのmetaタグがある場合に、縦向きのSafariでWebページから見える幅と高さで、解像度をピクセル比で割った値です。レスポンシブデザインやメディアクエリではこの数値を使います。
- ピクセル比（DPR）は、1つのCSSピクセルを縦横それぞれ何個の物理ピクセルで描くかを表します。
iPhoneの画面サイズ一覧（2016〜2026年）
| 機種 | 発売年 | 画面 | 解像度 | CSSビューポート | ピクセル比 |
|---|---|---|---|---|---|
| iPhone 18 Pro Max | 2026 | 6.9インチ | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 18 Pro | 2026 | 6.3インチ | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 17e | 2026 | 6.1インチ | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 17 Pro Max | 2025 | 6.9インチ | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 17 Pro | 2025 | 6.3インチ | 1206 × 2622 | 402 × 874 | 3 |
| iPhone Air | 2025 | 6.5インチ | 1260 × 2736 | 420 × 912 | 3 |
| iPhone 17 | 2025 | 6.3インチ | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16e | 2025 | 6.1インチ | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 16 Pro Max | 2024 | 6.9インチ | 1320 × 2868 | 440 × 956 | 3 |
| iPhone 16 Pro | 2024 | 6.3インチ | 1206 × 2622 | 402 × 874 | 3 |
| iPhone 16 Plus | 2024 | 6.7インチ | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 16 | 2024 | 6.1インチ | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Pro Max | 2023 | 6.7インチ | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 Pro | 2023 | 6.1インチ | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 15 Plus | 2023 | 6.7インチ | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 15 | 2023 | 6.1インチ | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Pro Max | 2022 | 6.7インチ | 1290 × 2796 | 430 × 932 | 3 |
| iPhone 14 Pro | 2022 | 6.1インチ | 1179 × 2556 | 393 × 852 | 3 |
| iPhone 14 Plus | 2022 | 6.7インチ | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 14 | 2022 | 6.1インチ | 1170 × 2532 | 390 × 844 | 3 |
| iPhone SE (第3世代) | 2022 | 4.7インチ | 750 × 1334 | 375 × 667 | 2 |
| iPhone 13 Pro Max | 2021 | 6.7インチ | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 13 / 13 Pro | 2021 | 6.1インチ | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 13 mini | 2021 | 5.4インチ | 1080 × 2340 | 375 × 812 | 3 |
| iPhone 12 Pro Max | 2020 | 6.7インチ | 1284 × 2778 | 428 × 926 | 3 |
| iPhone 12 / 12 Pro | 2020 | 6.1インチ | 1170 × 2532 | 390 × 844 | 3 |
| iPhone 12 mini | 2020 | 5.4インチ | 1080 × 2340 | 375 × 812 | 3 |
| iPhone SE (第2世代) | 2020 | 4.7インチ | 750 × 1334 | 375 × 667 | 2 |
| iPhone 11 Pro Max | 2019 | 6.5インチ | 1242 × 2688 | 414 × 896 | 3 |
| iPhone 11 Pro | 2019 | 5.8インチ | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 11 | 2019 | 6.1インチ | 828 × 1792 | 414 × 896 | 2 |
| iPhone XS Max | 2018 | 6.5インチ | 1242 × 2688 | 414 × 896 | 3 |
| iPhone XS | 2018 | 5.8インチ | 1125 × 2436 | 375 × 812 | 3 |
| iPhone XR | 2018 | 6.1インチ | 828 × 1792 | 414 × 896 | 2 |
| iPhone X | 2017 | 5.8インチ | 1125 × 2436 | 375 × 812 | 3 |
| iPhone 8 Plus | 2017 | 5.5インチ | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 8 | 2017 | 4.7インチ | 750 × 1334 | 375 × 667 | 2 |
| iPhone 7 Plus | 2016 | 5.5インチ | 1080 × 1920 | 414 × 736 | 3* |
| iPhone 7 | 2016 | 4.7インチ | 750 × 1334 | 375 × 667 | 2 |
| iPhone SE (第1世代) | 2016 | 4.0インチ | 640 × 1136 | 320 × 568 | 2 |
* Plusシリーズは1242 × 2208で描画し、1080 × 1920のパネルに縮小して表示するため、報告されるピクセル比は3ですが物理的には約2.6です。iPhone 12 miniと13 miniも同様に、3倍に必要なサイズより少し小さいパネルで幅375pxのビューポートを描画しています。
出典：各機種のAppleの技術仕様ページ（画面サイズと解像度）。ビューポートの値は解像度をピクセル比で割ったものです。Appleは毎年新機種を追加するので、最新機種はAppleの仕様ページで確認してください。
Web制作で実際に必要なビューポート幅
これだけ機種があっても、レイアウトで意識すべき幅はわずかです。
| CSS幅 | 機種 |
|---|---|
| 375px | SE（第2・第3世代）、8、miniシリーズ、X/XS/11 Pro |
| 390px | 12、13、14、16e、17e |
| 393px | 14 Pro、15、15 Pro、16 |
| 402px | 16 Pro、17、17 Pro、18 Pro |
| 414px | XR、11、XS Max、11 Pro Max、8 Plus |
| 420px | Air |
| 428〜440px | PlusとPro Maxシリーズ |
375〜440pxの範囲で伸縮するレイアウトなら、過去8年に発売されたすべてのiPhoneで問題なく表示されます。古い端末や文字を拡大している人まで考えるなら、320pxも確認しておきましょう。スマホ以外の幅についてはレスポンシブのブレイクポイント解説をご覧ください。
画面が最も大きいiPhoneと最も小さいiPhoneは？
最も大きいのは6.9インチのPro Maxシリーズ（iPhone 16 Pro Max、17 Pro Max、18 Pro Max）です。現行世代で最も小さいのは6.1インチ（iPhone 16eと17e）です。全面ディスプレイのデザインで最も小さかったのは5.4インチのiPhone 13 miniで、この表全体では4インチの初代iPhone SEが最小です。
これらのサイズでサイトを確認する方法
PCでサイトを正確なiPhoneのサイズで確認するには、ウィンドウを狭めるだけでは足りず、ビューポートに加えてピクセル比とユーザーエージェントも必要です。方法は2つあります。
- Chrome DevToolsのデバイスモード：iPhoneのプリセットを選ぶか、Editから表の幅・高さ・ピクセル比でカスタム端末を追加します。Chromeのモバイルエミュレータ解説をご覧ください。
- iPhoneのプリセットがあるスマホ表示の拡張機能。Mobile View Extensionは、対応するユーザーエージェント、画面サイズ、ピクセル比でiPhoneのフレーム内にタブを再読み込みします。目的の機種がなければ任意の解像度も入力できます。
どちらもChromeのエンジンで描画します。Safari特有の挙動はXcodeのシミュレーターか実機のiPhoneで確認してください。方法はiPhoneがなくてもiPhoneでの表示を確認する方法で解説しています。
よくある質問
iPhone 17のビューポートサイズは？
402 × 874 CSSピクセル、ピクセル比は3です。ディスプレイは6.3インチ、解像度は1206 × 2622です。iPhone 17 ProとiPhone 18 Proも同じ値です。
iPhone向けにはどの画面サイズでデザインすればいいですか？
幅375〜440pxで機能する可変レイアウトにしましょう。デザインカンプでは標準的なサイズとして390pxか393pxを使い、公開前に375pxと440pxを確認します。
iPhoneのビューポートが解像度より小さいのはなぜですか？
文字をくっきり表示するため、1つのCSSピクセルを縦横2〜3個の物理ピクセルで描いているからです。ビューポートは解像度をそのピクセル比で割った値です。詳しくはビューポートとはをご覧ください。