【Web製作】スマホ・タブレットの横幅(px)【2019年】

CSS
code

趣味でWebページを作成するようにまとめました。このあたりの幅でテストしておけば大丈夫だと思います。ただし、どこまで対応するか？ですけどね。

幅（portrait）

幅iPhoneAndroidiPad
320px4s・5・5s・SE
360pxXperia,Galaxy,Nexus 5
375px6・6s・7・8・X・XS
411pxGoogle Pixel
412pxNexus 6
414px (6・6s・7・8) Plus,XR,XS Max
768px〇
834pxiPad Pro 10.5,11,Air(3世代)
1024px〇

幅（landscape）

幅iPhoneAndroidiPad
480px4s
568px5・5s・SE
640pxXperia,Galaxy,Nexus 5
667px6・6s・7・8
731pxGoogle Pixel
736px (6・6s・7・8) Plus
812pxX,XS
896pxXR,XS Max
1024px〇
1112pxiPad Pro 10.5, Air(3世代)
1194pxiPad Pro 11
1366pxiPad Pro 12.9

CSS の orientation メディアクエリ

portrait
端末は縦長です。つまり、高さが幅よりも大きいか等しい状態です。
landscape
端末は横長です。つまり、幅が高さよりも大きい状態です
orientation - CSS: カスケーディングスタイルシート | MDN

メモ: この特性は端末の向きには関係がありません。多くの端末では縦長の向きでソフトキーボードを開くと、ビューポートの幅が高さよりも大きくなり、ブラウザーは portrait ではなく landscape のスタイルを使用することになります。
orientation - CSS: カスケーディングスタイルシート | MDN

今回のorientation値: landscape | portraitは単なるブラウザの縦横比なので、aspect-ratioと機能的には同じですね。
勘違いしていたCSSメディアクエリのlandscapeとportrait | WEBスキルアップ君

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}

こんなのもあるんですね。ただし、ブラウザの縦横比で、画面でないというのがあるが・・。

スポンサーリンク

関連記事