53 デバイス · スマートフォン, タブレット, コンピュータとスマートウォッチ
Apple デバイス: CSS ビューポート、密度、画面解像度
Apple デバイス 53 の表示特性が参照されており、それぞれのメディアクエリが反応する幅、ピクセル密度、パネル解像度が示されています。これらのデバイスのうち 43 はブラウザで直接テストできます。
スマートフォン Apple
13 の異なる CSS 幅が全範囲をカバーしています：320, 360, 375, 390, 393, 402, 414, 420, 428, 430, 440, 466 と 890 px。複数のモデルが同じ幅を共有しているため、1つを検証するだけで他のものも検証できます。
| モデル | CSSビューポート | 密度 | パネル解像度 | 対角線 | 年 |
|---|---|---|---|---|---|
| Apple iPhone 18 PRO | 402 × 873 | 3x | 1206 × 2619 | 6.3" | 2026 |
| Apple iPhone 18 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6.9" | 2026 |
| Apple iPhone Duo（折りたたみ） | 466 × 678 | 3x | 1398 × 2034 | 5.4" | 2026 |
| Apple iPhone Duo（展開） | 890 × 626 | 3x | 2670 × 1878 | 7.6" | 2026 |
| Apple iPhone 17 | 402 × 874 | 3x | 1206 × 2622 | 6.3" | 2025 |
| Apple iPhone 17 PRO | 402 × 873 | 3x | 1206 × 2622 | 6.3" | 2025 |
| Apple iPhone 17 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6.9" | 2025 |
| Apple iPhone Air | 420 × 912 | 3x | 1260 × 2736 | 6.5" | 2025 |
| Apple iPhone 16 | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2024 |
| Apple iPhone 16 Plus | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2024 |
| Apple iPhone 16 PRO MAX | 440 × 956 | 3x | 1320 × 2868 | 6.7" | 2024 |
| Apple iPhone 15 | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2023 |
| Apple iPhone 15 Plus | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2023 |
| Apple iPhone 15 PRO | 393 × 852 | 3x | 1179 × 2556 | 6.1" | 2023 |
| Apple iPhone 15 PRO MAX | 430 × 932 | 3x | 1290 × 2796 | 6.7" | 2023 |
| Apple iPhone 14 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2022 |
| Apple iPhone 14 Plus | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2022 |
| Apple iPhone 14 PRO | 390 × 844 | 3x | 1179 × 2556 | 6.1" | 2022 |
| Apple iPhone 14 PRO MAX | 428 × 928 | 3x | 1290 × 2796 | 6.7" | 2022 |
| Apple iPhone 13 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2021 |
| Apple iPhone 13 Mini | 375 × 812 | 3x | 1080 × 2340 | 5.4" | 2021 |
| Apple iPhone 13 PRO | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2021 |
| Apple iPhone 13 PRO MAX | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2021 |
| Apple iPhone 12 | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2020 |
| Apple iPhone 12 Mini | 360 × 780 | 3x | 1080 × 2340 | 5.4" | 2020 |
| Apple iPhone 12 Pro | 390 × 844 | 3x | 1170 × 2532 | 6.1" | 2020 |
| Apple iPhone 12 Pro Max | 428 × 926 | 3x | 1284 × 2778 | 6.7" | 2020 |
| Apple iPhone SE | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2020 |
| Apple iPhone 11 | 414 × 896 | 2x | 828 × 1792 | 6.1" | 2019 |
| Apple iPhone 11 Pro | 375 × 812 | 3x | 1125 × 2436 | 5.8" | 2019 |
| Apple iPhone 11 Pro Max | 414 × 896 | 3x | 1242 × 2688 | 6.5" | 2019 |
| Apple iPhone SE | 320 × 568 | 2x | 640 × 1136 | 4" | 2018 |
| Apple iPhone X | 375 × 812 | 3x | 1125 × 2436 | 5.8" | 2018 |
| Apple iPhone XR | 414 × 896 | 2x | 828 × 1792 | 6.1" | 2018 |
| Apple iPhone XS Max | 414 × 896 | 3x | 1242 × 2688 | 6.5" | 2018 |
| Apple iPhone 8 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2017 |
| Apple iPhone 8 Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2017 |
| Apple iPhone 7 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2016 |
| Apple iPhone 7 Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2016 |
| Apple iPhone 6s | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2015 |
| Apple iPhone 6s Plus | 414 × 736 | 3x | 1080 × 1920 | 5.5" | 2015 |
| Apple iPhone 6 | 375 × 667 | 2x | 750 × 1334 | 4.7" | 2014 |
| Apple iPhone 5c | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5s | 320 × 568 | 2x | 640 × 1136 | 4" | 2013 |
| Apple iPhone 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
コンピュータ Apple
指定された幅は、システムのデフォルトスケーリングでのブラウザウィンドウの幅であり、パネルの解像度ではありません：メディアクエリが見るのはこの最初の値です。
| モデル | CSSビューポート | 密度 | パネル解像度 | 対角線 | 年 |
|---|---|---|---|---|---|
| Macbook Neo 2026 | 1204 × 753 | 2x | 2408 × 1506 | — | 2026 |
| Apple Macbook PRO 16" | 1728 × 1117 | 2x | 3456 × 2234 | 16.2" | 2021 |
| iMac 24" | 2048 × 1152 | 2x | 4096 × 2304 | 9.3" | 2021 |
| Apple MacBook Air 2020 13" | 1280 × 800 | 2x | 2560 × 1600 | 13.3" | 2020 |
タブレット Apple
値は縦向きで示されています。横向きでは、幅と高さが逆になります：Apple iPad Mini (6th Gen) は 768 x 1024 から 1024 x 768 CSS ピクセルに変わります。タブレットのブレークポイントは両方をカバーする必要があります。
| モデル | CSS ビューポート (縦向き) | 密度 | パネル解像度 | 対角線 | 年 |
|---|---|---|---|---|---|
| Apple iPad Mini (6th Gen) | 768 × 1024 | 2x | 1536 × 2048 | 7.9" | 2021 |
| Apple iPad Air 4 | 820 × 1180 | 2x | 1640 × 2360 | 9.7" | 2020 |
| Apple iPad PRO 11" (3rd Gen) | 834 × 1194 | 2x | 1668 × 2388 | 11" | 2018 |
スマートウォッチ Apple
これらの時計のブラウザは1列しか表示しません：幅が唯一重要な測定値であり、すべての電話よりも狭いです。
| モデル | CSSビューポート | 密度 | パネル解像度 | 対角線 | 年 |
|---|---|---|---|---|---|
| Apple Watch Series 6 (40mm) | 162 × 197 | 2x | 324 × 394 | 1.6" | 2020 |
優先的にテストする幅
最も多くのモデルで使用されている幅は 320, 375, 390 と 414 px です。これらを最初に確認することで、参照されている Apple モデル 53 のうち 25 をカバーし、最初のブレークポイントを設定する必要があります。
162 pxまで下げて、Apple Watch Series 6 (40mm)を含むすべての範囲をカバーします。この幅に収まるレイアウトはどこでも収まります。タブレット側では、幅と高さが逆転する横向きの値も考慮してください。
高さに注意してください。モバイルブラウザはインターフェースバーで表示領域を縮小し、スクロールするとこれらが縮小します。そのため、100vh の高さは最初の画面を超えます。svh と dvh の単位が推奨されます。
Apple デバイス 43 でサイトをテスト、1つも購入せずに
表は測定値を示します。拡張機能は、モデルの正確なビューポートでサイトを表示し、その密度、User-Agent、および縦向きまたは横向きの切り替えを行います。
- Apple デバイス 43 がすぐに使用可能、古いモデルから今年の新作まで
- デバイス形式でエクスポートされたキャプチャとビデオ
- ローカル環境とプリプロダクションで動作
無料 · 4.9/5 (5,100件のレビュー)
1,500,000+ ユーザー
よくある質問
Apple で最も一般的な CSS ビューポートは何ですか？
375 x 812 px は、参照されている 53 モデルのうち 8 に共有されており、Apple iPhone 13 MiniとApple iPhone SE を含みます。この範囲で最初に確認すべき幅です。
Apple デバイスをカバーするためにテストする最小幅は何ですか？
162 px、リスト内で最も狭いモデルの幅、Apple Watch Series 6 (40mm)。レイアウトが162 pxに収まる場合、53台のAppleデバイスに収まり、最も広いものは2048 pxに達します。
Apple が発表した解像度が CSS ビューポートと一致しないのはなぜですか？
これらの画面は、1 CSS ピクセルあたり複数の物理ピクセルを表示するためです。Apple iPhone 18 PRO は 1206 x 2619 ピクセルのパネルと 402 x 873 px の CSS ビューポートを持ち、密度は 3 です。メディアクエリにはこの2番目の値を記述する必要があります。
Apple タブレットは縦向きと横向きで同じビューポートを持っていますか？
値は逆になります：Apple iPad Mini (6th Gen) は縦向きで 768 x 1024 px、横向きで 1024 x 768 px を表示します。表は縦向きの値を示し、シミュレーターは向きを切り替えることができます。
Apple デバイスを持たずにサイトをテストするにはどうすればよいですか？
Mobile FIRST拡張機能を使用して：これらのモデルの43のビューポート、ピクセル密度、User-Agent、およびタッチイベントをブラウザ内で直接再現します。localhostアドレスでも可能です。
引用されたブランドとモデルは、それぞれの所有者に帰属します。