Safari忽略特定点以下的CSS最大宽度媒体查询

Question

我正在优化响应网站，而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上有效）是，当网站小于640px时，滑块中的标题字体应该变小。

edit：网站现已更新，可以在大小小于640px时使用javascript添加类。该类始终使用较小的字体。这意味着它现在可以按预期运行，但是我更希望使用CSS媒体查询而不是JavaScript，因此我仍然希望看到一个解决方案。

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规则具有相同的概念，最新的规则将覆盖第一个规则。但如果规则不同，则不会推翻它。

您可以通过输入解决方法，此代码将由Webkit解释

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

Answer 3

我还遇到了与媒体查询类似的问题，查询在错误的断点处工作：This thread可能会帮助其他人来到这里。引用

尝试放大到0缩小

不，但是你说的使我明白！！！谢谢你们俩帮助我完成这项工作。问题是，我不是通过调整窗口大小而是通过放大页面来测试媒体查询。

所以，我的问题不是我的想法。我应该重新发布这个新问题吗？在FF和Chrome中，当我放大网页时，上面代码中的媒体查询会启动，但在Safari中，不会。我能做些什么使Safari在这里更像FF和Chrome吗？