Safari忽略低于某一点的css最大宽度媒体查询

我正在优化一个响应迅速的网站，Safari（台式机和移动设备）似乎完全忽略了低于某一点的媒体查询。我有如下代码：

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

@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 */
}

Firefox和Chrome都做出了恰当的响应。有人知道发生了什么事吗

您可以在此处查看网站：。应该发生的是（在FF和Chrome上工作）当站点小于640px时，滑块中的标题字体应该变小

---

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

@媒体规则与普通CSS规则的概念相同，最新的规则覆盖了第一个规则。但如果一条规则不同，它不会推翻它

您可以通过键入来解决此问题，此代码将由webkits进行解释

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

---

原来我缺少了一个弯曲的大括号，所以我有如下代码：

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

@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 */
}

@媒体屏幕和（最大宽度：767px）{
/*很多css*/
一些选择器{padding:20px；/*我在媒体查询方面也面临类似的问题，查询在错误的断点处工作：有一些东西可能会帮助其他人来到这里

尝试放大/缩小到0，即正常分辨率。按
命令+0

只是想一想：你能在Safari中放大你的字体大小吗？试着按命令0以确保它被重置为默认字体大小

不，但你说的让我明白了！！！谢谢你们两位帮我解决了这个问题。问题是，我不是通过调整窗口大小，而是通过放大页面来测试媒体查询

所以，我的问题并不是我想象的那样。我是否应该将此作为一个新问题重新发布？在FF和Chrome中，当我放大网页时，上面代码中的媒体查询会起作用，但在Safari中则不会。我能做些什么使Safari在这里更像FF和Chrome吗

我明白这一点，这就是为什么我将较小的宽度放在较大的宽度之后，以便覆盖。正如我所说，我在Firefox和Chrome中没有问题，所以我不认为这是一个订购问题，这似乎是Safari特有的问题。即使在iPhone上，也只使用第一个媒体查询中的CSS，即使第二个媒体查询应该是我们ed.如果你还没有在Safari中看过（如果你有）我想这在Chrome中很奇怪，因为Chrome也是Webkit。谢谢你的帮助！结果发现我的css中有一个错误，我发布了一个我自己的答案来解决它。所以我可以在Safari中复制这个问题，但我不知道为什么会发生这种情况。好像它只是开始忽略媒体查询是的，这正是我的感觉，谢谢你确认我没有发疯！Safari有某种视网膜显示功能吗？我不认为是这样，因为它对767px查询做出了适当的响应。你能提供一个小提琴吗？然后+1表示发现了错误，而-1表示没有ng发布了故障排除所需的代码片段：DI实际上发布了出现问题的网站，以便您可以查看CSS，所以我发布了代码。我在上面发布的代码经过了高度编辑，实际的CSS文件有100行，因此在这里发布整件事情是不实际的。开始使用linter w使用您的代码编辑器：D我使用Sublime Text 2的Sublimiter，它在我键入时运行CSSLint（和许多其他过滤机）：已经将我从自己手中解救出来的次数超过了我想要记住的次数。不要觉得自己很傻-有时当你犯了一个愚蠢的错误并解决了它时，你会帮助犯了同样愚蠢错误的另一个人（在本例中是我）解决他们的问题。谢谢！这里也有同样的问题…chrome不关心缺少的“支架”。但是safari和android/iphone/ipod根本不喜欢它。谢谢！