关于CSS：移动浏览器忽略媒体查询


mobile-safari ignoring media query

这是我快完成的网站。

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

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

(style.css，第974行)

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

实际上，这是另一个问题的一部分。我似乎无法在iPad上使用电话悬停/单击叶子图像。因此，我试图降级为仅从某个宽度的浏览器开始显示该死的电话号码。但是，即使@m也不起作用！疯了。

相关讨论

我刚刚找到了答案！移动设备不支持max-width。您必须将其设置为max-device-width！ :)

请确保为您的所有代码加上前缀！
@media仍然是CSS3的新功能，因此请确保它们都带有前缀！

因此，对于您的代码，它必须像这样：

1
2
3
4
5
@-webkit-media all and (max-width:800px){
#trigger {display:none;}
#telephone_leaf {display:none;}
#number_leaf {opacity:1;}
}
相关讨论