媒体查询无法使用横向方向

Question

对于我的CSS媒体查询，我首先将其设置为移动设备，处理所有整体样式。

然后我有：

@media only screen and (min-width : 790px) {
}

@media only screen and (min-width : 990px) {
}

我已加入

@media screen and (orientation: landscape) and (max-width: 520px) {
}

处理智能手机转为横向模式时的CSS更改，但它似乎不起作用，我是否错误地编写了横向媒体查询？

Answer 1

有一个类似的问题：我的iPod / iPhone设备即使在旋转时也被检测为纵向。

我设法通过以下媒体查询解决了这个问题：

@media screen and (min-aspect-ratio: 4/3) 
{*your styles here*}

如果您想要在宽度大于高度的情况下定位任何情况，我认为像（最小纵横比：101/100）或类似的东西可能会起作用。但是，对于目前的设备，4/3就足够了，我想。

Answer 2

如果您需要横向的宽高比，我认为min-aspect-ratio: 1足够......因此max-aspect-ratio: 1是肖像。

但是，即使CSS正确，Cordova / PhoneGap应用还需要一个额外的步骤：Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?

我在那之前找到了这个StackOverflow项目，所以也许其他人也会发现有用的交叉链接。