媒体查询不适用于 iphone 5 横向

Question

我正在使用媒体查询进行简单的背景颜色更改，但它在 iphone 5 上不起作用。我不确定我的查询是否错误，但这是我的元标记：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

这是我的媒体查询：

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
   .loginPage
    {
        background: red !important;
    }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape) {
   .loginPage
   {
       background: green !important;
   }

}

红色背景正常，但当我旋转设备时，背景不会变为绿色。任何帮助将不胜感激。

Answer 1

试试下面的。增加横向的大小。我相信当您将 iPhone 转为横向模式时，您现在将拥有更高的设备宽度。

您可以尝试将横向最大宽度增加到 1136 像素，这应该是 iPhone 5 在横向模式下的宽度。如果这不起作用，我建议将最大宽度的大小增加到一个疯狂的大数字，然后逐步消除问题。