Question

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

我试过这些：

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

但它们在所有情况下都不起作用。 On some Android devices，以纵向模式显示键盘可以使其使用“orientation：landscape”查询，因为纵横比超过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解决方案。）

Answer 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方向更改为横向，它将不会开始使用“横向”查询，除非宽度也增加。如果您只是显示键盘，则不应该这样做。

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

Answer 2

我不是一个有方向的专业人士，但也许你可以同时拥有横向方向的两个条件：

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

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

2 个答案: