1つの範囲で11個のCSS幅
シミュレーターの31台のiPhoneは、320から440 pxの11つの異なる幅に分かれています。手元にあるものを確認しても、他の10については何も言えません：レイアウトが崩れるのは、ブランド間ではなく、モデル間です。
シミュレート可能な31台のiPhone · 320から440 px · 縦向きと横向き
オンラインiPhoneシミュレーター：デバイスなしでサイトをテスト
拡張機能は、320から440 pxの幅で、31台のiPhoneのviewport CSS、ピクセル密度、User-Agent、タッチジェスチャーをブラウザ内で再現します。表は各モデルの測定値を示し、各行はその完全な仕様にリンクしています。
1,500,000+ インストール · Chrome Web Storeで4.9/5
数秒で無料インストール · コンピュータ専用
なぜiPhoneでサイトをテストするのですか？
2xまたは3xの密度
世代によって、各CSSピクセルは2または3の物理ピクセルでレンダリングされます：2xの11モデル、3xの30モデル。高解像度バージョンを提供しない場合、最初のものでは鮮明な画像が、後者ではぼやけて表示されます。
縦向きと横向き
横向きに切り替えると、最近のiPhoneは幅956 pxに達し、タブレット用に予約していたブレークポイントを引き起こします。これは最もテストされていない向きであり、固定ヘッダーが画面の半分を占める場所です。
3ステップでiPhoneをシミュレートする方法
Macもアカウントもシステムイメージのダウンロードも不要：シミュレーターは開いているタブに適用されます。
- 01 拡張機能をインストール Chrome、Firefox、またはEdgeで、公式ストアから。無料で、アカウント作成不要。
- 02 リストからiPhoneを選択 31モデルは世代ごとに分類されており、新しいものから古いものまで。選択したモデルのviewportとUser-Agentでサイトが再読み込みされます。
- 03 世代を比較し、キャプチャ レイアウトが崩れる場所を見るために、2台のiPhoneを並べて表示し、横向きに切り替え、切り抜きキャプチャやビデオをエクスポートします。
シミュレーターの31台のiPhone
11個の異なるCSS幅がすべての選択をカバーします：320, 360, 375, 390, 393, 402, 414, 420, 428, 430 と 440 px。複数のモデルが同じ幅を共有しているため、1つを確認するだけで他のものも確認できます。表でどれが共有されているか確認できます。
| モデル | CSSビューポート | 密度 | パネル解像度 | 対角線 | 年 |
|---|---|---|---|---|---|
| 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 5 | 320 × 568 | 2x | 640 × 1136 | 4" | 2012 |
優先してテストすべきiPhoneの幅
最も多く表現されている幅は375, 390 と 428 pxです。最初にそれらを確認することで、表の31モデルのうち14をカバーします：追加する前に、最初のブレークポイントをそれらに設定する必要があります。
Apple iPhone 5を含む全範囲をカバーするために320 pxまで下げます：この幅に収まるレイアウトは、流通しているすべてのiPhoneに適合します。最近のモデルは440 pxに達し、両極端の間には120 pxの差があります。
ノッチやDynamic Islandのあるモデルでは、有効領域は画面の端から始まりません。viewport-fit=coverを宣言し、env(safe-area-inset-top)とenv(safe-area-inset-bottom)の変数でマージンを確保してください。これがないと、ページ下部の固定バーがシステムのホームバーの下に隠れてしまいます。
Safari iOSでの高さに注意：インターフェースバーが表示領域を減少させ、スクロール時に縮小します。100vhの高さは最初の画面を超えるため、svhとdvhの単位が実際に表示される値を示します。
iPhoneシミュレーター、XcodeシミュレーターまたはDevTools？
Xcodeのシミュレーターは本物のiOSとSafariを動かします：WebKitレンダリングエンジンのバグを再現する唯一の方法です。Macが必要で、数ギガバイトのダウンロードが必要で、統合セッションの途中では開きません。
DevToolsのレスポンシブモードはブラウザウィンドウのサイズを変更し、User-Agentを変更します。これは検査ツールであり、デバイスフレームやリアルなタッチジェスチャーはなく、一度に1つの画面のみで、クライアントに見せるものはありません。
Mobile FIRSTはその中間に位置します。Windows、macOS、Linuxで既に開いているブラウザ内で、31台のiPhoneのviewport、密度、User-Agent、タッチイベントを再現し、複数のモデルを並べて表示します。レンダリングエンジンはあなたのブラウザのものです：WebKitに固有の動作を確認するには、実際のデバイスまたはAppleのシミュレーターが必要です。
1台も購入せずに31台のiPhoneでサイトをテスト
表は測定値を示します。拡張機能は、モデルの正確なビューポートでサイトを表示し、その密度、User-Agent、縦横切り替えを行います。
- iPhone 5から今年のリリースまで、31台のiPhoneがすぐに使用可能
- 実際のビューポート、ピクセル密度、User-Agent iOS
- 退行を見つけるために並べられた2つの世代
- localhostおよびプレプロダクションで動作
無料 · 4.9/5 (5,100件のレビュー)
1,500,000+ ユーザー
よくある質問
iPhoneのCSSビューポートは何ですか？
それはモデルに依存し、シミュレーターの31台のiPhoneで320から440 pxの幅です。最も一般的な値は390 pxで、6モデルが共有しています。メディアクエリが読むのは、このCSSピクセル幅であり、パネルの解像度ではありません。
シミュレーターは本当にSafariを使用していますか？
いいえ、そしてそれを知っておくことが重要です：それはあなたのブラウザのエンジンでiPhoneのviewport、ピクセル密度、User-Agent、タッチジェスチャーを再現します。これにより、レイアウト、ブレークポイント、タッチ動作がカバーされます。WebKitエンジンに固有のバグには、実際のデバイスまたはXcodeのシミュレーターが必要です。
Macを持たずにiPhoneをシミュレートできますか？
はい。拡張機能はWindows、macOS、Linux上のChrome、Firefox、Edgeにインストールできます。Xcodeのシミュレーターとは異なり、Appleのハードウェアやシステムイメージのダウンロードは必要ありません。
拡張機能で利用可能なiPhoneの数は？
31のプリセットモデルは、最新から最古まで、各リリースごとに更新されます。カタログの他の10台のiPhoneは、それぞれの技術仕様がサイトに掲載されています：それらをリストで見つけるために、カスタムデバイスに幅と密度を記録してください。
シミュレーターはどのUser-Agentを発表しますか？
選択したデバイスのもので、実際に送信するものです。iOS 26.0上のApple iPhone 17の場合、それは：Mozilla/5.0 (iPhone; CPU iPhone OS 26_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.0 Mobile/15E148 Safari/604.1です。したがって、サーバーと検出スクリプトはiPhoneを認識し、デスクトップブラウザではありません。
ノッチとDynamic Islandをどのようにテストしますか？
シミュレーターはモデルの安全マージンを適用します：env(safe-area-inset-bottom)を無視するレイアウトは、デバイス上での問題を示します。これらの変数に値を持たせるには、ビューポートタグでviewport-fit=coverを宣言してください。
シミュレートされたiPhoneでlocalhostのサイトをテストできますか？
はい。拡張機能は、URLに関係なく現在のタブに適用されます：本番、プレプロダクション、または開発中のローカルサーバー。これが、オンラインシミュレーターとは異なり、あなたのマシンを認識しない理由です。
リストにiPhoneがない場合はどうすればよいですか？
対応するシートの幅、高さ、密度でカスタムデバイスを作成し、それを保存します：それはリストに追加され、プリセットモデルのように動作します。
iPhone、iPad、Safari、XcodeはApple Inc.の商標です。Mobile FIRSTはAppleと提携しておらず、Appleの承認を受けていません。