移动浏览器忽略媒体查询答案

【问题标题】：mobile-safari ignoring media query移动浏览器忽略媒体查询
【发布时间】：2014-09-16 17:45:18
【问题描述】：

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 也不起作用！快疯了。

【问题讨论】：

【解决方案1】：

确保为所有代码添加前缀！
@media 对 CSS3 来说仍然是新的，所以请确保所有代码都添加前缀！

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

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

【讨论】：

【解决方案2】：

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

【讨论】：