css - 媒体查询不适用于移动设备。 CSS

Question

我知道这是一个漫长的过程，但我有一个景观媒体查询。它在 chrome 模拟器等上运行良好。但是当我在 iPhone 和 Android 上查看时，媒体查询没有启动。

@media screen and (orientation:landscape) and (max-height: 414px) {
    #flip-container {
        display: block;
    }
    .text {
        display: none;
    }
    .nav {
        display: none;
    }
    .logo {
        display: none;
    }
}

Answer 1

你能指定吗

@media screen and
min-width: XXX px and 
max-width: XXX px and 
and (orientation:landscape) {
//your css code

}

对于 iPhone，我使用 XCODE 作为模拟器，然后在那里进行测试以检查它是否有任何问题。 有时，在大多数情况下，chrome 模拟器无法正常工作。

此外，如果您尝试针对指定的 iPad，您可以使用 iPad 媒体查询。