css - 媒体查询不适用于横向

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 更改，但它似乎不起作用，我是否写错了横向媒体查询？

score 1 · Accepted Answer

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

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

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

如果您想针对宽度大于高度的任何情况，我认为类似 (min-aspect-ratio: 101/100) 或类似的东西可能会起作用。但是，对于当前的设备，我认为 4/3 就足够了。

score 0 · Accepted Answer

如果您需要横向的纵横比，我认为min-aspect-ratio: 1就足够了......因此max-aspect-ratio: 1对于纵向。

但是，即使 CSS 正确，Cordova/PhoneGap 应用程序还需要一个额外的步骤：为什么我的 Cordova/PhoneGap iOS 应用程序在设备旋转时不旋转？

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

2 回答 2