Safari忽略某个点以下的css max-width媒体查询

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,滑块中的标题字体应该变得更小.

编辑:该网站现已更新为使用javascript在大小小于640px时添加类.该类始终使用较小的字体大小.这意味着它现在按预期工作,但我宁愿使用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开始工作.其他浏览器没有扼杀错误,这部分是为什么它很难追查.

感谢大家的帮助,我觉得现在很傻.