iPhone/iPad/Apple Watch他、レスポンシブデザインに役立つ解像度(画面サイズ)早見表
2022年03月05
この記事では、iPhone/iPad/Appleなどのスマートフォン・タブレットの画面解像度を一覧にしてご紹介しております。 レスポンシブデザインのコーディングなどにお役立てください。
| サイズ | 端末 | ポイント | Retina | ピクセル | 倍率 | デバイス | アスペクト比 |
|---|---|---|---|---|---|---|---|
| 3.5 | iPhone iPhone 3G iPhone 3GS | 320×480 | 1 | 320×480 | 1 | 320×480 | 2:3 |
| 3.5 | iPhone 4 iPhone 4S | 320×480 | 2 | 640×960 | 1 | 640×960 | 2:3 |
| 4 | iPhone 5 iPhone 5s iPhone 5c iPhone SE | 320×568 | 2 | 640×1136 | 1 | 640×1136 | 9:16 (近似値) |
| 4.7 | iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone SE(2世代) | 375×667 | 2 | 750×1334 | 1 | 750×1334 | 9:16 (近似値) |
| 4.7 (互換/拡大) | iPhone 6 iPhone 6s iPhone 7 iPhone 8 iPhone SE(2世代) | 320×568 | 2 | 640×1136 | 1.17 | 750×1334 | 9:16 (近似値) |
| 5.4 | iPhone 12 mini iPhone 13 mini | 375×812 | 3 | 1125×2436 | 0.96 | 1080×2340 | 9:19.5 (近似値) |
| 5.5 | iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus | 414×736 | 3 | 1242×2208 | 0.87 | 1080×1920 | 9:16 |
| 5.5 (互換) | iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus | 320×568 | 2 | 640×1136 | 1.69 | 1080×1920 | 9:16 (近似値) |
| 5.5 (拡大) | iPhone 6 Plus iPhone 6s Plus iPhone 7 Plus iPhone 8 Plus | 375×667 | 3 | 1125×2001 | 0.96 | 1080×1920 | 9:16 (近似値) |
| 5.8 | iPhone X iPhone XS iPhone 11 Pro | 375×812 | 3 | 1125×2436 | 1 | 1125×2436 | 9:19.5 (近似値) |
| 5.8 (互換) | iPhone X iPhone XS iPhone 11 Pro | 375×667 | 3 | 1125×2001 | 1 | 1125×2001 | 9:16 (近似値) |
| 6.1 | iPhone XR iPhone 11 | 414×896 | 2 | 828×1792 | 1 | 828×1792 | 9:19.5 (近似値) |
| 6.1 | iPhone 12 iPhone 12 Pro iPhone 13 iPhone 13 Pro | 390×844 | 3 | 1170×2532 | 1 | 1170×2532 | 9:19.5 (近似値) |
| 6.5 | iPhone XS Max iPhone 11 Pro Max | 414×896 | 3 | 1242×2688 | 1 | 1242×2688 | 9:19.5 (近似値) |
| 6.7 | iPhone 12 Pro Max iPhone 13 Pro Max | 428×926 | 3 | 1284×2778 | 1 | 1284×2778 | 9:19.5 (近似値) |
| 7.9 | iPad mini | 768×1024 | 1 | 768×1024 | 1 | 768×1024 | 3:4 |
| 7.9 | iPad mini 2 iPad mini 3 iPad mini 4 iPad mini(5世代) | 768×1024 | 2 | 1536×2048 | 1 | 1536×2048 | 3:4 |
| 8.3 | iPad mini(6世代) | 744×1133 | 2 | 1488×2266 | 1 | 1488×2266 | 3:4.6 (近似値) |
| 9.7 | iPad iPad 2 | 768×1024 | 1 | 768×1024 | 1 | 768×1024 | 3:4 |
| 9.7 | iPad 3 iPad 4 iPad Air iPad Air 2 iPad Pro 9.7 | 768×1024 | 2 | 1536×2048 | 1 | 1536×2048 | 3:4 |
| 10.2 | iPad(7世代) | 810×1080 | 2 | 1620×2160 | 1 | 1620×2160 | 3:4 |
| 10.5 | iPad Pro 10.5 iPad Air(3世代) | 834×1112 | 2 | 1668×2224 | 1 | 1668×2224 | 3:4 |
| 10.9 | iPad Air(4世代) | 820×1180 | 2 | 1640×2360 | 1 | 1640×2360 | 3:4.3 (近似値) |
| 11.0 | iPad Pro 11 | 834×1194 | 2 | 1668×2388 | 1 | 1668×2388 | 3:4.3 (近似値) |
| 12.9 | iPad Pro 12.9 | 1024×1366 | 2 | 2048×2732 | 1 | 2048×2732 | 3:4 (近似値) |
| 1.32 | Watch(初代,S1,S2,S3) 38mm | 136×170 | 2 | 272×340 | 1 | 272×340 | |
| 1.5 | Watch(初代,S1,S2,S3) 42mm | 156×195 | 2 | 312×390 | 1 | 312×390 | |
| Watch(S4,S5,S6,SE) 40mm | 162×197 | 2 | 324×394 | 1 | 324×394 | ||
| Watch(S4,S5,S6,SE) 44mm | 184×224 | 2 | 368×448 | 1 | 368×448 | ||
| 1.69 | Watch(S7) 41mm | 176×215 | 2 | 352×430 | 1 | 352×430 | |
| 1.9 | Watch(S7) 45mm | 198×242 | 2 | 396×484 | 1 | 396×484 |
ハイライトされたCSSピクセルの数値でコーディングします。
iPhone 12 Pro Maxは横幅428px、
iPhone 12 Pro、iPhone 12は横幅390px、
iPhone 12 miniは横幅360px、
iPhone SEは横幅375px、
iPhone 11、iPhone XRは横幅414pxです。
画像等を作成する際はデバイスピクセルの数値を参考にしてください。
iPhone 12 Pro Maxは横幅428px x 3倍、
iPhone 12 Pro、iPhone 12は横幅390px x 3倍、
iPhone 12 miniは横幅360px x 3倍、
iPhone SEは横幅375px x 2倍、
iPhone 11、iPhone XRは横幅414px x 2倍のサイズで画像を作ってCSSピクセルの大きさに縮小表示させると画像は鮮明に表示されますす。
ファイルサイズが大きくなり過ぎて速度面で気になる場合は1.5倍位のサイズで画像を作ってもギリギリセーフ、ではないでしょうか。または写真を使わない画像はSVG等を利用するなど、あくまでも個人的見解です。
