Safari忽略css max-width媒体查询低于某一点

问题描述

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

I'm working on optimizing a responsive site and Safari (both desktop and mobile) seems to be completely ignoring media queries below a certain point. I have code like the following:

@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都会正确回应。有没有人知道发生了什么？

Firefox and Chrome both respond appropriately. Does anyone have any ideas about what is going on?

您可以在这里看到该网站：。应该会发生什么（并且在FF和Chrome上工作），因为网站变得小于640像素，滑块中的标题字体应该变得更小。

You can see the site here: http://kgillingham.webfactional.com. What should happen (and works on FF and Chrome) is that as the site becomes less than 640px the header font in the slider should become a smaller size.

编辑：网站现已更新为在大小小于640像素时使用javascript添加类。该类始终使用较小的字体大小。这意味着它现在正常工作，但我更愿意使用CSS媒体查询比javascript，所以我仍然想看到一个解决方案。

edit: The site has now been updated to use javascript to add a class when the size is less than 640px. That class always uses the smaller font size. This means that it works as expected now, but I would much rather use CSS media queries than javascript so I would still like to see a solution.

推荐答案

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

Turns out I was missing a squiggly brace, so I had code like the following:

@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开始工作。

Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.

感谢大家的帮助，现在我感觉很傻。

Thanks for the help everyone, I feel pretty silly now.

这篇关于Safari忽略css max-width媒体查询低于某一点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！