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

Question

使用JavaScript可以检测设备的方向模式：

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

然而，有没有仅使用CSS来检测方向的方法？

例如：

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

- Francesco

Answer 1

用CSS检测屏幕方向：

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

CSS中媒体查询的定义可以在http://www.w3.org/TR/css3-mediaqueries/#orientation找到。

- Richard Schneider

---

注意：该值不对应实际设备方向。在大多数以纵向方向打开软键盘的设备上，会使视口变得比高更宽，从而导致浏览器使用横向样式而非纵向样式。 - Johann Combrink

非常重要，你提到了这一点。打开键盘会破坏设计。很好，你指出了这一点。 - lowtechsun

@JohannCombrink的评论参考链接：https://dev59.com/P2ox5IYBdhLWcg3w74q2 - ndequeker

当键盘弹出时，采用不同的样式可能并不是一件坏事，因为可见区域通常更适合适用于横向模式的样式。因此这可能并不会让人感到失望。 - Muhammad bin Yusrat

我喜欢穆罕默德的评论：如果软件键盘导致视口比宽度短，那么视口将成为横向方向（即使您正常持有物理设备）。在我看来，CSS 的工作是按预期进行的。 - Benny Schmidt

@BennyNightingale不仅是景观，也是更小的屏幕。需要完全不同的设计。 - pery mimon

Answer 2

@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}

@media all and (orientation:landscape) {
  /* Style adjustments for landscape mode goes here */
}

但看起来你仍需要进行实验

- mistagrooves

---

方向取决于设备。某些平板电脑在横屏模式下报告方向为0。iPhone与三星Galaxy的报告不同。 - BlackMagic

Answer 3

我认为我们需要编写更具体的媒体查询。确保如果您编写一个媒体查询，它不会影响其他视图（移动，平板电脑，台式电脑），否则可能会出现问题。我建议为每个设备编写一个基本的媒体查询，它可以覆盖两个视图，并编写一个方向媒体查询，以便您可以更多地编写有关方向视图的特定代码，这是很好的实践。我们不需要同时编写两个媒体方向查询。您可以参考下面的示例。如果我的英语写作不太好，我很抱歉。

针对移动设备:

@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

- jitu

Answer 4

我会选择aspect-ratio，它提供了更多的可能性。

/* 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

- BastianBalthasarBux

---

设备的方向是否影响纵横比，还是每个设备都有固定的纵横比？ - Michael S

纵横比取决于浏览器视口，因此在移动设备上，由于浏览器根据方向调整大小，因此它略微取决于方向。 - BastianBalthasarBux

Answer 5

方向似乎不稳定。
使用宽高比可能是更好的解决方法。

@media only screen and (max-aspect-ratio: 1/1){
//portrait
}
@media only screen and (min-aspect-ratio: 1/1){
//horizontal
}

- Tommy Au

Answer 6

在Javascript中最好使用screen.width和screen.height。这两个值在所有现代浏览器中都可用。它们提供了屏幕的实际尺寸，即使在应用启动时浏览器被缩小。 window.innerWidth在浏览器被缩小时会发生变化，在移动设备上不会发生，但在PC和笔记本电脑上可能会发生。 screen.width和screen.height的值在移动设备在纵向和横向模式之间切换时会发生变化，因此通过比较这些值可以确定模式。如果screen.width大于1280px，则处理的是PC或笔记本电脑。

您可以在Javascript中构建事件侦听器来检测这两个值何时翻转。纵向screen.width值的集中在320px（主要是iPhone），360px（大多数其他手机），768px（小型平板电脑）和800px（常规平板电脑）。

- BlackMagic

---

需要注意的是，当 iPhone 旋转时，iOS 不会翻转 screen.width 和 screen.height 的值。它始终报告相同的值。您必须使用 window.orientation 属性来确定设备是否已旋转...（在横向模式下，该值将为 90 或 -90）。 - interDist

我很高兴这个答案在这里，因为如果纯CSS方法由于任何原因无法解决问题，它会引导到下一个逻辑解决方案。 - Darren S

Answer 7

我们可以使用以下代码进行测试

@media all and (orientation:portrait) {
 // simple css for portrait mode of mobile device
}

@media all and (orientation:landscape) {
 // css for landscape mode
}

更多信息：https://www.w3.org/TR/mediaqueries-3/#orientation

- Rahul Daksh

---

我认为应该使用screen而不是all。 - maf88