02
スマホ・タブレットの解像度を調べる
【作成日】 2020/10/20 11:02 【更新日】
ブレイクポイントを決める時等、主なスマホやタブレットの解像度を調べる必要がある。しかし、ホームページのブレイクポイントを決める場合は、スマホはiPhone、タブレットはiPadの解像度を参考に決めても差し支えない場合が多い。そこで、iPhoneとiPadの解像度を整理すると、以下のようになる。
iPhone
互換や拡大モードを無視すると、解像度は以下の表で考えればいい。
| 機種名 画面サイズ | 解像度（CSS用） 解像度（画像用） |
|---|---|
| 5,5s,SE（初代） 4 inch | 320 px × 568 px 640 px × 1,136 px |
| 6,6s,7,8,SE（2代目） 4.7 inch | 375 px × 667 px 750 px × 1,334 px |
| 12 mini 5.4 inch | 375 px × 812 px 1125 px × 2,436 px |
| 6 Plus,6s Plus, 7 Plus, 8 Plus 5.5 inch | 414 px × 736 px 1,080 px × 1,920 px |
| X,XS,11 Pro 5.8 inch | 375 px × 812 px 1,125 px × 2,436 px |
| XR, 11 6.1 inch | 414 px × 896 px 828 px × 1,792 px |
| 12, 12 Pro 6.1 inch | 390 px × 884 px 1170 px × 2,532 px |
| XS Max, 11 Pro Max 6.5 inch | 414 px × 896 px 1,242 px × 2,688 px |
| 12 Pro Max 6.7 inch | 428 px × 926 px 1,284 px × 2,778 px |
iPad
iPadの解像度が下表のとおり。Pro（12.9）を除くと大きな違いはなさそう。
| 機種名 画面サイズ | 解像度（CSS用） 解像度（画像用） |
|---|---|
| mini 7.9 inch | 768 px × 1,024 px 768 px × 1,024 px |
| mini 2, 3, 4, 5世代 7,9 inch | 768 px × 1,024 px 1,536 px × 2,048 px |
| 初代, 2 9.7 inch | 768 px × 1,024 px 768 px × 1,024 px |
| 3, 4, Air, Air 2, Pro（9.7） 9.7 inch | 768 px × 1,024 px 1,536 px × 2,048 px |
| 7世代 10.2 inch | 810 px × 1,080 px 1,620 px × 2,160 px |
| Pro（10.5）, Air（3世代） 10.5 inch | 834 px × 1,112 px 1,668 px × 2,224 px |
| Air（4世代） 10.9 inch | 820 px × 1,180 px 1,640 px × 2,360 px |
| Pro（11） 11.0 inch | 834 px × 1,194 px 1,668 px × 2,388 px |
| Pro（12.9） 12.9 inch | 1,024 px × 1,366 px 2,048 px × 2,732 px |