Browser 如何使用CSS媒体查询检测设备方向？

在JavaScript中，可以使用以下方法检测方向模式：

if (window.innerHeight > window.innerWidth) {
    portrait = true;
} else {
    portrait = false;
}

但是，是否有一种方法仅使用CSS来检测方向

例如：

@media only screen and (width > height) { ... }

---

但看起来您仍然必须使用CSS来检测屏幕方向：

 @media screen and (orientation:portrait) { … }
 @media screen and (orientation:landscape) { … }

---

媒体查询的CSS定义在

我认为我们需要编写更具体的媒体查询。确保如果您编写一个媒体查询，它不会影响其他视图（移动、选项卡、桌面），否则可能会出现问题。我建议为各自的设备编写一个基本的媒体查询，包括视图和一个方向媒体查询，您可以编写更多关于方向视图的特定代码，以获得良好实践。我们不需要同时编写两个媒体定向查询。你可以参考我下面的例子。如果我的英语写作不太好，我很抱歉。 例：

适用于移动设备

@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.

}

桌面

根据您的设计要求制作，享受……（：

谢谢，

---

Jitu

在Javascript中，最好使用

screen.width

和

screen.height

。这两个值在所有现代浏览器中都可用。它们给出了屏幕的真实尺寸，即使在应用程序启动时浏览器已经缩小。

窗口。当浏览器缩小时，innerWidth

会发生变化，这可能会导致这不会发生在移动设备上，但也可能发生在个人电脑和笔记本电脑上

当移动设备在纵向和横向模式之间切换时，

screen.width

和

screen.height

的值会发生变化，因此可以通过比较这些值来确定模式。如果

screen.width

大于1280px，则您正在处理PC或笔记本电脑

---

你可以用Javascript构建一个事件监听器来检测这两个值何时被翻转。要关注的纵向屏幕宽度值是320px（主要是iPhone）、360px（大多数其他手机）、768px（小型平板电脑）和800px（普通平板电脑）。

我会选择纵横比，它提供了更多的可能性

/* 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) {
    ...
}

方向和纵横比都取决于视口的实际大小，与设备方向本身无关

---

阅读更多信息：

方向取决于设备。某些平板电脑在横向模式下报告方向=0。iPhone的报告与三星Galaxies不同。注意：此值与实际设备方向不一致。在大多数设备上以纵向方向打开软键盘将导致视区变宽l、 从而导致浏览器使用横向样式而不是纵向样式。@JohannCombrink您提到的这一点非常重要。打开键盘会弄乱设计。很好，您指出了这一点。@JohannCombrink评论参考：当弹出键盘时应用不同的样式可能不是坏事，因为可见区域它通常更适合应用于横向模式的样式。因此可能不是一个令人不快的问题。我喜欢穆罕默德的评论：如果软件键盘导致视口短于其宽，则视口将是横向的（即使您正常握住物理设备）。CSS按照我的想法工作。需要注意的是，当iPhone旋转时，iOS不会翻转

屏幕。宽度
和
屏幕。高度
值。它总是报告相同的值。您必须使用
窗口。方向
属性来确定设备是否旋转。。。（横向模式的值为90或-90。）
/* 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) {
    ...
}