如何使用CSS媒体查询检测设备方向? [英] How to detect the device orientation using CSS media queries?
本文介绍了如何使用CSS媒体查询检测设备方向?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
在JavaScript中,可以使用以下方式检测定向模式:
In JavaScript the orientation mode can be detected using:
if (window.innerHeight > window.innerWidth) {
portrait = true;
} else {
portrait = false;
}
但是,有没有一种方法可以仅使用CSS来检测方向?
However, is there a way to detect the orientation using CSS only?
例如.像这样:
@media only screen and (width > height) { ... }
推荐答案
CSS以检测屏幕方向:
CSS to detect screen orientation:
@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }
媒体查询的CSS定义位于 http://www.w3. org/TR/css3-mediaqueries/#orientation
The CSS definition of a media query is at http://www.w3.org/TR/css3-mediaqueries/#orientation
这篇关于如何使用CSS媒体查询检测设备方向?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文