iPhone / iPad / Android のビューポート(CSSピクセル数)一覧表
iPhone / iPad全世代ビューポート一覧表
Web制作時、レスポンシブデザインの検証で必ず必要になるiPhone,iPadのビューポート(CSS px)を、まとめました。 CSSでのブレイクポイント設計やChrome DevToolsでの実機確認にそのまま使える数値です。
iPhone 全世代 CSSビューポート一覧
| 世代 / モデル | 発売年 | 画面サイズ | 物理解像度（ピクセル数） | CSSビューポート |
|---|---|---|---|---|
| iPhone（初代） | 2007 | 3.5" | 320 × 480 | 320 × 480 |
| iPhone 3G | 2008 | 3.5" | 320 × 480 | 320 × 480 |
| iPhone 3GS | 2009 | 3.5" | 320 × 480 | 320 × 480 |
| iPhone 4 | 2010 | 3.5" | 640 × 960 | 320 × 480 |
| iPhone 4S | 2011 | 3.5" | 640 × 960 | 320 × 480 |
| iPhone 5 | 2012 | 4.0" | 640 × 1,136 | 320 × 568 |
| iPhone 5c | 2013 | 4.0" | 640 × 1,136 | 320 × 568 |
| iPhone 5s | 2013 | 4.0" | 640 × 1,136 | 320 × 568 |
| iPhone 6 | 2014 | 4.7" | 750 × 1,334 | 375 × 667 |
| iPhone 6 Plus | 2014 | 5.5" | 1,080 × 1,920 | 414 × 736 |
| iPhone 6s | 2015 | 4.7" | 750 × 1,334 | 375 × 667 |
| iPhone 6s Plus | 2015 | 5.5" | 1,080 × 1,920 | 414 × 736 |
| iPhone SE（第1世代） | 2016 | 4.0" | 640 × 1,136 | 320 × 568 |
| iPhone 7 | 2016 | 4.7" | 750 × 1,334 | 375 × 667 |
| iPhone 7 Plus | 2016 | 5.5" | 1,080 × 1,920 | 414 × 736 |
| iPhone 8 | 2017 | 4.7" | 750 × 1,334 | 375 × 667 |
| iPhone 8 Plus | 2017 | 5.5" | 1,080 × 1,920 | 414 × 736 |
| iPhone X | 2017 | 5.8" | 1,125 × 2,436 | 375 × 812 |
| iPhone XS | 2018 | 5.8" | 1,125 × 2,436 | 375 × 812 |
| iPhone XS Max | 2018 | 6.5" | 1,242 × 2,688 | 414 × 896 |
| iPhone XR | 2018 | 6.1" | 828 × 1,792 | 414 × 896 |
| iPhone 11 | 2019 | 6.1" | 828 × 1,792 | 414 × 896 |
| iPhone 11 Pro | 2019 | 5.8" | 1,125 × 2,436 | 375 × 812 |
| iPhone 11 Pro Max | 2019 | 6.5" | 1,242 × 2,688 | 414 × 896 |
| iPhone SE（第2世代） | 2020 | 4.7" | 750 × 1,334 | 375 × 667 |
| iPhone 12 mini | 2020 | 5.4" | 1,080 × 2,340 | 360 × 780 |
| iPhone 12 | 2020 | 6.1" | 1,170 × 2,532 | 390 × 844 |
| iPhone 12 Pro | 2020 | 6.1" | 1,170 × 2,532 | 390 × 844 |
| iPhone 12 Pro Max | 2020 | 6.7" | 1,284 × 2,778 | 428 × 926 |
| iPhone 13 mini | 2021 | 5.4" | 1,080 × 2,340 | 360 × 780 |
| iPhone 13 | 2021 | 6.1" | 1,170 × 2,532 | 390 × 844 |
| iPhone 13 Pro | 2021 | 6.1" | 1,170 × 2,532 | 390 × 844 |
| iPhone 13 Pro Max | 2021 | 6.7" | 1,284 × 2,778 | 428 × 926 |
| iPhone SE（第3世代） | 2022 | 4.7" | 750 × 1,334 | 375 × 667 |
| iPhone 14 | 2022 | 6.1" | 1,170 × 2,532 | 390 × 844 |
| iPhone 14 Plus | 2022 | 6.7" | 1,284 × 2,778 | 428 × 926 |
| iPhone 14 Pro | 2022 | 6.1" | 1,179 × 2,556 | 393 × 852 |
| iPhone 14 Pro Max | 2022 | 6.7" | 1,290 × 2,796 | 430 × 932 |
| iPhone 15 | 2023 | 6.1" | 1,179 × 2,556 | 393 × 852 |
| iPhone 15 Plus | 2023 | 6.7" | 1,290 × 2,796 | 430 × 932 |
| iPhone 15 Pro | 2023 | 6.1" | 1,179 × 2,556 | 393 × 852 |
| iPhone 15 Pro Max | 2023 | 6.7" | 1,290 × 2,796 | 430 × 932 |
| iPhone 16 | 2024 | 6.1" | 1,179 × 2,556 | 393 × 852 |
| iPhone 16 Plus | 2024 | 6.7" | 1,284 × 2,778 | 428 × 926 |
| iPhone 16 Pro | 2024 | 6.3" | 1,206 × 2,622 | 402 × 874 |
| iPhone 16 Pro Max | 2024 | 6.9" | 1,320 × 2,868 | 440 × 956 |
| iPhone 16e | 2025 | 6.1" | 1,170 × 2,532 | 390 × 844 |
| iPhone 17 | 2025 | 6.3" | 1,206 × 2,622 | 402 × 874 |
| iPhone 17 Air | 2025 | 6.5" | 1,260 × 2,736 | 420 × 912 |
| iPhone 17 Pro | 2025 | 6.3" | 1,206 × 2,622 | 402 × 874 |
| iPhone 17 Pro Max | 2025 | 6.9" | 1,320 × 2,868 | 440 × 956 |
| iPhone 17e | 2026 | 6.1" | 1,170 × 2,532 | 390 × 844 |
| iPhone 18 | 2026 | 6.3" | 1,206 × 2,622 | 402 × 874 |
| iPhone 18 Pro | 2026 | 6.3" | 1,206 × 2,622 | 402 × 874 |
| iPhone 18 Pro Max | 2026 | 6.9" | 1,320 × 2,868 | 440 × 956 |
iPad全世代ビューポート一覧表
| 世代 | 発売年 | 画面サイズ | 物理解像度(ピクセル数) | CSSビューポート |
|---|---|---|---|---|
| iPad(初代) | 2010 | 9.7" | 768 × 1,024 | 768 × 1,024 |
| iPad 第2世代 | 2011 | 9.7" | 768 × 1,024 | 768 × 1,024 |
| iPad 第3世代(Retina) | 2012 | 9.7" | 1,536 × 2,048 | 768 × 1,024 |
| iPad 第4世代 | 2012 | 9.7" | 1,536 × 2,048 | 768 × 1,024 |
| iPad 第5世代 | 2017 | 9.7" | 1,536 × 2,048 | 768 × 1,024 |
| iPad 第6世代 | 2018 | 9.7" | 1,536 × 2,048 | 768 × 1,024 |
| iPad 第7世代 | 2019 | 10.2" | 1,620 × 2,160 | 810 × 1,080 |
| iPad 第8世代 | 2020 | 10.2" | 1,620 × 2,160 | 810 × 1,080 |
| iPad 第9世代 | 2021 | 10.2" | 1,620 × 2,160 | 810 × 1,080 |
| iPad 第10世代 | 2022 | 10.9" | 1,640 × 2,360 | 820 × 1,180 |
| iPad(A16／通称第11世代) | 2025 | 11" | 1,640 × 2,360 | 820 × 1,180 |
Android スマートフォン CSSビューポート一覧
AndroidのCSSビューポートです。
| メーカー | モデル | 発売年 | 画面サイズ | 物理解像度（ピクセル数） | CSSビューポート |
|---|---|---|---|---|---|
| Samsung | Galaxy S22 Ultra 5G | 2022 | 6.8" | 1,440 × 3,088 | 384 × 824 |
| Samsung | Galaxy A54 | 2023 | 6.4" | 1,080 × 2,340 | 384 × 832 |
| Pixel 8 | 2023 | 6.2" | 1,080 × 2,400 | 412 × 915 | |
| Pixel 8 Pro | 2023 | 6.7" | 1,344 × 2,992 | 448 × 998 | |
| OPPO | Oppo A38 | 2023 | 6.56" | 720 × 1,612 | 360 × 806 |
| vivo | vivo Y36 | 2023 | 6.64" | 1,080 × 2,388 | 393 × 869 |
| realme | realme C67 | 2023 | 6.72" | 1,080 × 2,400 | 393 × 873 |
| Samsung | Galaxy S24 | 2024 | 6.2" | 1,080 × 2,340 | 360 × 780 |
| Samsung | Galaxy S24 Ultra | 2024 | 6.8" | 1,440 × 3,120 | 384 × 832 |
| Pixel 9 | 2024 | 6.3" | 1,080 × 2,424 | 412 × 924 | |
| Pixel 9 Pro XL | 2024 | 6.8" | 1,344 × 2,992 | 448 × 998 | |
| Xiaomi | Redmi Note 13 4G | 2024 | 6.67" | 1,080 × 2,400 | 393 × 873 |
| Xiaomi | Xiaomi 14T | 2024 | 6.67" | 1,220 × 2,712 | 407 × 905 |
| Xiaomi | Poco X6 Pro 5G | 2024 | 6.67" | 1,220 × 2,712 | 407 × 905 |
| Xiaomi | Redmi 14C | 2024 | 6.88" | 720 × 1,640 | 360 × 820 |
| vivo | vivo Y19s | 2024 | 6.68" | 720 × 1,608 | 360 × 804 |
| realme | realme Note 50 | 2024 | 6.7" | 720 × 1,600 | 360 × 800 |
| Motorola | Moto G 5G (2024) | 2024 | 6.6" | 720 × 1,612 | 412 × 922 |
| Motorola | Moto G Play (2024) | 2024 | 6.5" | 720 × 1,600 | 412 × 915 |
| Motorola | Moto G Stylus 5G (2024) | 2024 | 6.7" | 1,080 × 2,400 | 432 × 960 |
| Samsung | Galaxy S25 Ultra | 2025 | 6.9" | 1,440 × 3,120 | 384 × 832 |
| Pixel 9a | 2025 | 6.3" | 1,080 × 2,424 | 412 × 924 | |
| Motorola | Moto G (2025) | 2025 | 6.7" | 720 × 1,604 | 412 × 917 |
| Motorola | Moto G Power (2025) | 2025 | 6.8" | 1,080 × 2,388 | 444 × 980 |
Chrome DevToolsへの登録方法
上記の数値は、そのままChrome DevToolsのカスタムデバイスとして登録できます。
- 対象ページで F12（Cmd+Option+I）を押してDevToolsを開く
- 左上の「デバイスツールバーの切り替え」アイコン、または（Cmd+Shift+M）でデバイスツールバーに切り替える
- デバイス選択のドロップダウンから Edit... を選び、「Add custom device」で新規デバイスを追加
- Device name・Width・Height・Device pixel ratio(初代・第2世代は1、それ以外は2)を入力(User agent stringはデフォルトのままでOK)
これでOKです。
デバイスツールバーで作成した端末名を選択すると、そのCSSビューポートでページがレンダリングされ、iPadでの見え方を確認することができるようになります。
登録さえしておけば、都度数値を調べ直す手間がなくなるので、
まとめて一気に登録しておくのがおすすめです。
