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

Question

在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,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