WEB制作者向け無料テーマ「Arkhe」をリリースしました

新作iPhone8, iPhone8 Plus, iPhone X の画面サイズは?メディアクエリの横幅に指定するピクセルについて

新しいiPhoneが出ました。iPhone8, と iPhone X。

いろいろ気になることはあるものの、Webをやっていると画面サイズ(横幅)が気になって仕方ない。

解像度なんてどうでもいい、知りたいのは実質的な表示領域のサイズ。メディアクエリで指定する時のあのサイズ…。

ということで調べてみました。

 

結論から言うと、メディアクエリの指定は何も変えなくてよさそうです。横幅に関してはiPhone6世代から変わっていません。

実際の数値は以下の通りです。

  • iPhone8375px - 667px (W - H) 
  • iPhone8 Plus414px - 736px (W - H) 
  • iPhone X :  375px - 812px (W - H) 

ふむふむ。スマホ用のメディアクエリはiPhoneを基準にするなら最大414pxのままで良いということがわかりました。

ちなみに自分でも確認したい時はUIScreen.main.bounds.sizeというのを調べればいいそうです。早速購入したという方は実機で確認してみるといいかもしれません。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次