媒体查询不适用于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变成横向模式时，你现在拥有更高的设备宽度。

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