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

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

我尝试这些：

@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

但这些并不在PhoneGap的在iPad上运行;你需要的比例更像12/9。我有点担心瞄准这种特定的比例，因为可能存在横向模式小于该比例的设备。

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

来源

2013-06-28 JW.

我不是一个亲与方向，但也许你可以为横向像两个条件：

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

来源

2013-06-28 19:13:07 GuiGreg

我认为方向查询只是检查长宽比大于或小于1/1，所以这是行不通的。 –

JW是对的，建议的逻辑和检查方向一样：风景。 –

我仍然想找到一个仅限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方向更改为横向，则不会使用“横向”查询开始，除非宽度也增加。如果您只显示键盘，则不会发生这种情况。

我不确定这是多么可靠，但它到目前为止工作。

来源

2013-07-01 20:07:15

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

回答

相关问题