Question

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

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

但是，有没有办法只使用CSS检测方向？

EG。类似的东西：

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

Answer 1

用于检测屏幕方向的CSS：

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

媒体查询的CSS定义位于http://www.w3.org/TR/css3-mediaqueries/#orientation

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

但看起来仍然需要experiment

Answer 3

我认为我们需要编写更具体的媒体查询。确保如果您编写一个媒体查询，它应该对其他视图（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.

}

桌面

根据您的设计要求享受......（：

谢谢，吉图

Answer 4

我会选择长宽比，它提供了更多的可能性。

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

Answer 5

在Javascript中，最好使用screen.width和screen.height。所有现代浏览器都提供这两个值。它们给出了屏幕的真实尺寸，即使浏览器在应用程序启动时缩小了尺寸。缩小浏览器时window.innerWidth会发生变化，这种情况在移动设备上无法发生，但可能会在PC和笔记本电脑上发生。

当移动设备在纵向和横向模式之间翻转时，screen.width和screen.height的值会发生变化，因此可以通过比较这些值来确定模式。如果screen.width大于1280像素，则您需要处理个人电脑或笔记本电脑。

您可以在Javascript中构造一个事件侦听器，以检测何时翻转这两个值。要专注的肖像screen.width值是320px（主要是iPhone），360px（大多数其他手机），768px（小型平板电脑）和800px（普通平板电脑）。

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

5 个答案: