mobile-safari忽略媒体查询

Question

Here's我差不多完成了网站。

我的iPad mini浏览器会忽略以下媒体查询。为什么呢？

@media all and (max-width:800px){
#trigger {display:none;}
#telephone_leaf {display:none;}
#number_leaf {opacity:1;}
}

（style.css，第974行）

在调整桌面浏览器大小时有效！

实际上，这是另一个问题的一部分。我似乎无法在iPad上使用电话悬停/点击图片。出于这个原因，我试图降低到从某个浏览器宽度开始显示该死的电话号码。但是甚至没有@m的作品!!疯了。

Answer 1

我刚刚找到了答案！移动设备不支持max-width。你必须把它作为max-device-width！ :)

Answer 2

确保为所有代码添加前缀！
@media对于CSS3来说还是新手，所以请确保它都是前缀！

因此，使用您的代码，它必须是这样的：

@-webkit-media all and (max-width:800px){
#trigger {display:none;}
#telephone_leaf {display:none;}
#number_leaf {opacity:1;}
}