如何使用 CSS 媒体查询检测设备方向? [英] How to detect the device orientation using CSS media queries?

问题描述

在 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屋！