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

在 JavaScript 中，方向模式可以通过以下方式检测到:

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

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

例如:

@media only screen and (width > height) { ... }
224916 次浏览
小开 
@media all and (orientation:portrait) {
/* Style adjustments for portrait mode goes here */
}


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

但是看起来你还是得做 实验

小开
最佳答案

CSS 检测屏幕方向:

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

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

小开
我认为我们需要写更具体的媒体查询。确保如果你写一个媒体查询，它应该不会影响到其他视图(移动，选项卡，桌面) ，否则它可能会带来麻烦。我想建议为各自的设备写一个基本的媒体查询，其中包括两个视图和一个方向媒体查询，你可以具体代码更多关于方向视图它的良好做法。我们不需要同时写两个媒体方向查询。你可以参考我下面的例子。如果我的英语写作不太好，我很抱歉。 例句:

为了莫比尔

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


}

桌面

按照您的设计要求制作... (:

谢谢, 吉图
小开

在 Javascript 中，最好使用 screen.width和 screen.height。这两个值在所有现代浏览器中都可用。它们给出了屏幕的真实尺寸，即使当应用程序启动时浏览器已经缩小。当浏览器缩小时，window.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) {
...
}

方向和高宽比都取决于视窗的实际大小，与设备方向本身没有任何关系。

阅读更多: https://dev.to/ananyaneogi/useful-css-media-query-features-o7f

小开

我们可以简单地使用下面的代码进行测试

@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

小开
方向似乎不稳定 使用纵横比也许是一个更好的方法 
@media only screen and (max-aspect-ratio: 1/1){
//portrait
}
@media only screen and (min-aspect-ratio: 1/1){
//horizontal
}

提交答案