媒体查询不适用于横向答案

【问题标题】：Media query not working with Landscape orientation媒体查询不适用于横向
【发布时间】：2023-03-20 12:36:02
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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 项目，所以也许其他人也会发现交叉链接很有用。

【讨论】：