主な機種のスマホとタブレットの画面サイズです。
iPhone/iPadの解像度
| 端末 | サイズ(inch) | 解像度 |
|---|---|---|
| iPhone 5・5s・SE | 4 | 640 x 1136 |
| iPhone 6・6s・7・8 | 4.7 | 750 x 1334 |
| iPhone [6・6s・7・8] Plus | 5.5 | 1080 x 1920 |
| iPhone X・XS | 5.8 | 1125 x 2436 |
| iPhone XR | 6.1 | 828 x 1792 |
| iPhone XS Max | 6.5 | 1242 x 2688 |
| iPad mini | 7.9 | 768 x 1024 |
| iPad mini2・3・4 | 1536 x 2048 | |
| iPad・2 | 9.7 | 768 x 1024 |
| iPad 3・4・Air・2・Pro(9.7) | 1536 x 2048 | |
| iPad Pro(10.5) | 10.5 | 1668 x 2224 |
| iPad Pro(12.9) | 12.9 | 2048 x 2732 |
Androidの解像度
| 端末 | サイズ(inch) | 解像度 |
|---|---|---|
| Google Pixel 3 | 5.5 | 1080 x 2160 |
| 6.3 | 1440 x 2960 | |
| XPERIA | 4.6 | 720 x 1280 |
| 5/5.2 | 1080 x 1920 | |
| 5.5 | 2160 x 3840(4K) | |
| XPERIA Tablet | 10.1 | 1200 x 1920 |
| Galaxy S | 4.8 | 720 x 1280 |
| Galaxy Note 3 | 5.7 | 1080 x 1920 |
| Galaxy S4/S5 | 5/5.1 | 1080 x 1920 |
| Galaxy S6/S7 | 5.1/5.5 | 1440 x 2560 |
| Galaxy S8/S9 | 5.8/6.2 | 1440 x 2960 |
| Galaxy Note8/9 | 6.3/6.4 | 1440 x 2960 |
| Huawei P20 | 5.8 | 1080 x 2244 |
| Huawei P20 Lite | 5.8 | 1080 x 2280 |
| Huawei MediaPad | 10.1 | 1200 x 1920 |
| HTC | 5 | 1080 x 1920 |
| 5.5 | 1440 x 2560 | |
| AQUOS | 5.3 | 1440 x 2560 |
| 6 | 1440 x 3040 | |
| ZenFone | 5.2/5.5 | 1080 x 1920 |
| 6.2 | 1080 x 2246 | |
| ZenPad | 10.1 | 800 x 1280 |
Webページのレスポンシブデザインを考慮するときは各解像度のメディアクエリはこれくらい用意するかんじでしょうか。
@media screen and (max-width: 1250px) @media screen and (max-width: 1080px) @media screen and (max-width: 768px) @media screen and (max-width: 480px)
480pxは古い端末用として、上位３つくらいに分けて設定すればいいように思います。
