ios - 媒体查询不适用于 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 在横向模式下的宽度。如果这不起作用，我会建议将最大宽度的大小增加到一个疯狂的大数字，然后逐步解决这个问题。