Safari浏览器忽略的CSS最大宽度低于某个点媒体查询(Safari ignoring css m

我正在优化的自适应网站和Safari（桌面和移动），似乎完全无视低于某个点的媒体查询。 我有类似下面的代码：

@media screen and (max-width: 767px){
    /* Safari responds to css here */
}
@media screen and (max-width: 640px){
    /* css here is ignored by Safari */
}

Firefox和Chrome都作出适当的反应。 有没有人有什么回事任何想法？

你可以在这里看到的网站： http://kgillingham.webfactional.com 。 应该发生什么（工作在FF和Chrome）是随着网站变得小于640像素，在滑块的标题字体应该成为一个更小的尺寸。

编辑 ：该网站现已更新为使用JavaScript来添加一个类时，粒径小于640像素。 这个类总是使用较小的字体大小。 这意味着它可以像现在预期，但我宁愿使用比JavaScript的CSS媒体查询，所以我还是希望看到的解决方案。

Answer 1:

原来我错过了梅开二度的波浪，让我不得不像下面的代码：

@media screen and (max-width: 767px){
    /* lots of css */
    .some_selector { padding: 20px; /*<---- missing squiggly brace*/
    /* more css */
}
@media screen and (max-width: 640px){
    /* lots more css */
}

插入缺少的括号造成Safari浏览器开始工作。 其他浏览器并没有在这部分是错误呛，为什么它是如此难以追查。

感谢大家的帮助，我现在感觉非常愚蠢的。

Answer 2:

@media规则是相同的概念正常的CSS规则，最新的规则覆盖的第一个。 但如果规则不同，它不会否决它。

你可以把通过打字的解决方法是，该代码只是webkits解释

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}

文章来源: Safari ignoring css max-width media queries below a certain point