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

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

幅（portrait）

幅（landscape）

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;
  }
}

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