在 JavaScript 中，可以使用以下方法检测方向模式：
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
但是，有没有办法仅使用 CSS 来检测方向？
例如。类似：
@media only screen and (width > height) { ... }
【问题讨论】：
标签： browser css tablet media-queries
用于检测屏幕方向的 CSS：
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
媒体查询的 CSS 定义位于 http://www.w3.org/TR/css3-mediaqueries/#orientation
【讨论】：
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}
@media all and (orientation:landscape) {
/* Style adjustments for landscape mode goes here */
}
但看起来你仍然需要experiment
【讨论】：
我认为我们需要编写更具体的媒体查询。确保如果您编写一个媒体查询，它不应该影响其他视图（Mob、Tab、Desk），否则可能会很麻烦。我想建议为各自的设备编写一个基本的媒体查询，它涵盖视图和一个方向媒体查询，您可以具体编写更多关于方向视图的代码，以获得良好的实践。我们不需要同时编写两个媒体方向查询。你可以参考我下面的例子。如果我的英文写作不太好，我很抱歉。 例如：
适用于移动设备
@media screen and (max-width:767px) {
..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:320px) and (max-width:767px) and (orientation:landscape) {
..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.
}
平板电脑
@media screen and (max-width:1024px){
..This is basic media query for respective device.In to this media query CSS code cover the both view landscape and portrait view.
}
@media screen and (min-width:768px) and (max-width:1024px) and (orientation:landscape){
..This orientation media query. In to this orientation media query you can specify more about CSS code for landscape view.
}
桌面
按照您的设计要求享受...（：
谢谢， 极途
【讨论】：
我会选择纵横比，它提供了更多的可能性。
/* Exact aspect ratio */
@media (aspect-ratio: 2/1) {
...
}
/* Minimum aspect ratio */
@media (min-aspect-ratio: 16/9) {
...
}
/* Maximum aspect ratio */
@media (max-aspect-ratio: 8/5) {
...
}
方向和纵横比都取决于视口的实际大小，与设备方向本身无关。
阅读更多：https://dev.to/ananyaneogi/useful-css-media-query-features-o7f
【讨论】：
在 Javascript 中最好使用 screen.width 和 screen.height。这两个值在所有现代浏览器中都可用。它们给出了屏幕的真实尺寸，即使应用程序启动时浏览器已经按比例缩小。 window.innerWidth 在浏览器缩小时会发生变化，这在移动设备上不会发生，但可以在 PC 和笔记本电脑上发生。
screen.width和screen.height的值在移动设备在纵向和横向模式之间切换时会发生变化，因此可以通过比较值来确定模式。如果screen.width 大于 1280 像素，则表示您使用的是 PC 或笔记本电脑。
您可以在 Javascript 中构造一个事件侦听器来检测两个值何时翻转。要关注的纵向 screen.width 值是 320px（主要是 iPhone）、360px（大多数其他手机）、768px（小型平板电脑）和 800px（普通平板电脑）。
【讨论】：
screen.width 和 screen.height 值。它总是报告相同的值。您必须使用 window.orientation 属性来确定设备是否已旋转...（横向模式的值为 90 或 -90。）