【CSS】縦長か横長か【orientation】
orientation: portrait → 縦長
orientation: landscape → 横長
ビューポートが縦長なのか横長なのかで
※デバイスが縦向き横向きでなく
見た目を厳密に整えたいときに（私個人的には）よく使っています。
パソコンで、ブラウザを伸縮させて縦長だったり横長だったりにサイズ変更しても変化します。
これはデバイスの向きではなく、ブラウザの表示領域（viewport）のサイズが縦長なのか？横長なのか？という意味になります。
基本的には、パソコンでブラウザを伸び縮みさせて表示される領域云々よりも
スマホで見たときに縦横で変えたい、という場合に便利かなと思います。
https://developer.mozilla.org/ja/docs/Web/CSS/@media/orientation
メタタグのほうは、width=device-width、initial-scale=1 指定。
なお、正方形だと縦指定が優先されます。
<meta name="viewport" content="width=device-width, initial-scale=1">
幅や高さのサイズを指定し、かつ、縦長の場合または横長の場合のSCSS（CSS）の書き方例。
CSS
@media screen and (max-width: 575.98px) and (orientation: portrait) {
// 画面幅 ～575.98px かつ 縦長
}
@media screen and (max-height: 575.98px) and (orientation: landscape) {
// 画面高さ ～575.98px かつ 横長
}
@media screen and (min-width: 321px) and (max-width: 360px) and (orientation: portrait) {
// 画面幅 321px～360px かつ 縦長
}