iPhone iPad の Media Queries ブレイクポイント

最終更新日:

CSS @media で iPhone iPad を基準としたブレイクポイントを指定する時の参考表示領域。
iPad 9.7インチ縦向きの横幅は 768px。
iPad 10.5インチ縦向きの横幅は 834px。
iPhone 5.8インチを横向きで使うと 812px になり、iPad 9.7インチの横幅を超える。
もはやスマホとタブレットの境界を引くのは困難な状況。
iPhone 6.5インチに至っては、横向きで使うと 896px。
@media (min-width:834px)、@media (min-width:896px) 辺りが1つの目安になりそう。

端末と表示領域

4インチ iPhone SE/5C/5s/5
320×568
4.7インチ iPhone 8/7/6s/6
375×667
5.5インチ iPhone 8/7/6S/6 Plus
414×736
5.8インチ iPhone XS/X
375×812
6.1インチ iPhone XR
414×896
6.5インチ iPhone XS Max
414×896
7.9インチ iPad mini
768×1024
9.7インチ iPad
768×1024
10.5インチ iPad
834×1112
11インチ iPad
834×1194
12.9インチ iPad
1024×1366