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

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

我试过这些：

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

但它们并非在所有情况下都有效，在纵向模式下显示键盘可以使用“方向：横向”查询，因为纵横比大于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解决方案。）

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

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

---

我仍然希望找到一个只使用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-orientation更改为横向，则不会开始使用“横向”查询，除非宽度也增加。如果只显示键盘，则不应出现这种情况

---

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

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