媒体查询不适用于横向

Posted 2023-03-14

【中文标题】媒体查询不适用于横向

【英文标题】：Media query not working with Landscape orientation

【发布时间】：2013-05-22 22:57:10

【问题描述】：

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

【问题讨论】：

您在哪个设备上测试它？ iPhone5 的最大宽度为 560 像素。

我有一部 iPhone 4S 正在测试它

可能是样式冲突。可以发个链接吗？

【参考方案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?

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