如何检测使用CSS媒体查询设备的方向？如何检测使用CSS媒体查询设备的方向？(How to dete

在JavaScript的定向模式可以用来检测：

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

然而，有没有一种方法来检测只使用CSS的方向是什么？

例如。就像是：

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

但它仍然看起来像你必须尝试

Answer 3:

我认为，我们需要编写更具体的媒体查询。确保如果你写一个媒体查询，应该不会影响到其他视图（MOB，标签，台），否则就麻烦了。我想建议写上涵盖视图和一个方向媒体查询，你可以约定向特定的代码更加查看其良好做法的各个设备中的一个基本的媒体查询。我们并不需要写在同一时间两个媒体定位查询。你可以参考我下面的例子。我很抱歉，如果我的英语写作是没有多少好处。例如：

对于移动

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

在Javascript中，最好是使用screen.width和screen.height 。这两个值在所有现代浏览器。他们给屏幕的实际尺寸，即使浏览器已经缩小时，应用程序会调用。 window.innerWidth当浏览器缩小，这是不可能发生在移动设备上，但可以在PC和笔记本电脑发生变化。

的值screen.width和screen.height当移动设备纵向和横向模式之间翻转的变化，所以能够通过比较值来确定模式。如果screen.width大于1280px你正在处理一个PC或笔记本电脑。

你可以在Javascript构建一个事件监听器，当两个值翻转检测。画像screen.width值集中在320像素（主要是iPhone手机），640x360像素（大多数其他手机），768px（小片）和800像素（普通片）。

文章来源: How to detect the device orientation using CSS media queries?