いつも迷うiPhoneの画面解像度(デバイスピクセル)と実質解像度(CSSピクセル？)をまとめてみます。
| デバイス名 | 画面解像度 | 実質解像度 | 画面サイズ |
|---|---|---|---|
| iPhone XS Max / 11 Pro Max | 1242 x 2688 | 414 x 896 | 6.5 inch |
| iPhone 11 Pro | 1125 x 2436 | 375 x 812 | 5.8 inch |
| iPhone XR/11 | 828 x 1792 | 414 x 896 | 6.1 inch |
| iPhone X / XS | 1125 x 2436 | 375 x 812 | 5.8 inch |
| iPhone 8 Plus/ 7 Plus/ 6s Plus/ 6 Plus/ | 1080 x 1920 | 414 x 736 | 5.5 inch |
| iPhone 8 / 7 /6s / 6 | 750 x 1334 | 375 x 667 | 4.7 inch |
| iPhone5/5S/5c/SE | 640 x 1136 | 320 x 568 | 4 inch |
| pc-1 | 1920 x 1080 | ||
| pc-2 | 1336 x 768 |
あと、レスポンシブなどで実質解像度を使う場合は以下のmetaタグをhtmlのhead内に入れます。
<meta name="viewport" content="width=device-width,initial-scale=1">これを入れないと画面解像度で横幅計算されるのでブレイクポイントに引っかからず、PCの見た目がそのままキュッと縮まった感じでスマホに表示されることになります。
あとはユーザーエージェントでスマホとPCを判別して、スマホはスマホ用のコーディングに統一するとかかなあ。