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媒体查询。

Answer 2

我认为这是因为最大高度。尝试 max-width 。

媒体查询无法在Mobile上运行。 CSS

2 个答案: