0

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

我试过这些：

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

但它们并非在所有情况下都有效。在某些 Android 设备上，以纵向模式显示键盘可以使其使用“方向：横向”查询，因为纵横比超过 1/1。

我已经看到了使用它的建议：

@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 解决方案。）

4

2 回答 2

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)";
}

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

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

于 2013-07-01T20:07:15.150 回答
0

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

@media screen and (min-aspect-ratio: 13/9), screen and (orientation:landscape)
于 2013-06-28T19:13:07.887 回答