使用 CSS 媒体查询检测方向的最佳方法是什么？答案

【问题标题】：What's the best way to detect orientation using CSS media queries?使用 CSS 媒体查询检测方向的最佳方法是什么？
【发布时间】：2013-06-26 15:42:07
【问题描述】：

使用 CSS @media 查询检测设备方向的最可靠方法是什么？

我试过这些：

@media screen and (orientation: portrait)
@media screen and (orientation: landscape)

但它们并非在所有情况下都有效。 On some Android devices，以纵向模式显示键盘可以使其使用“方向：横向”查询，因为纵横比大于 1/1。

我已经看到 suggestions 使用它来代替：

@media screen and (max-aspect-ratio: 13/9) // portrait
@media screen and (min-aspect-ratio: 13/9) // landscape

但这些不适用于 iPad 上的 PhoneGap；你需要一个更像 12/9 的比率。而且我有点担心定位到这样一个特定的比例，因为可能存在横向模式小于该比例的设备。

那么有没有更可靠的方法来测试呢？（我只是在寻找 CSS @media 查询，而不是 JavaScript 解决方案。）

【问题讨论】：

标签： mobile screen-orientation

【解决方案1】：

我仍然想找到一个纯 CSS 的解决方案，但我想到了一种使用 JavaScript 生成 @media 查询的方法。

假设您已经可以使用 JavaScript 正确检测方向变化，您可以使用适当的规则动态生成 style 标记。当您这样做并且您处于纵向模式时，请根据当前文档的宽度为查询添加宽度约束。例如：

var portraitQuery, landscapeQuery;
if (currentOrientation === "portrait") {
    portraitQuery = "@media (orientation: portrait)"
        + " or ((orientation: landscape)"
            + " and (max-width: " + (window.innerWidth) + "px))",
    landscapeQuery = "@media (orientation: landscape)"
        + " and (min-width: " + (window.innerWidth + 1) + "px)";
} else {
    portraitQuery = "@media (orientation: portrait)";
    landscapeQuery = "@media (orientation: landscape)";
}

然后当方向改变时，重新生成这些查询。这个想法是，如果您处于纵向模式并且@media 方向更改为横向，它将不会开始使用“横向”查询，除非宽度也增加。如果您只显示键盘，则不应发生这种情况。

我不确定这有多可靠，但到目前为止它对我有用。

【讨论】：

【解决方案2】：

我不是方向方面的专业人士，但也许您可以同时满足横向方向的两个条件，例如：

@media screen and (min-aspect-ratio: 13/9), screen and (orientation:landscape)

【讨论】：

我认为方向查询只是检查纵横比是否大于或小于 1/1，所以这是行不通的。
JW 是对的，建议的逻辑与仅检查方向相同：风景。