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

【问题标题】：Safari ignoring css max-width media queries below a certain pointSafari忽略某个点以下的css max-width媒体查询
【发布时间】：2013-04-05 07:10:38
【问题描述】：

我正在优化响应式网站，而 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 像素时，滑块中的标题字体应该变得更小。

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

【问题讨论】：

所以我能够在 Safari 中复制它，但我不知道为什么会这样。就好像它只是在需要时才开始忽略媒体查询。
是的，这正是我的感觉，感谢您确认我没有疯！
Safari 是否有某种视网膜显示功能？
我不认为是这样，因为它对 767px 查询做出了适当的响应。
你能提供一个小小提琴吗？

标签： css safari media-queries

【解决方案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 开始工作。其他浏览器并未因该错误而窒息，这也是其难以追踪的部分原因。

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

【讨论】：

然后 +1 表示发现错误，-1 表示未发布故障排除所需的代码 sn-p :D
我实际上发布了有问题的网站，因此您可以查看 CSS，所以我确实发布了代码。我在上面发布的代码是经过高度编辑的，实际的 css 文件有 100 多行，所以在这里发布整个内容是不切实际的。
开始在代码编辑器中使用 linter。 :D 我将 SublimeLinter 与 Sublime Text 2 一起使用，它在我输入时运行 CSSLint（和许多其他 linter）：它拯救了我自己的次数比我想记住的要多。
不要觉得自己很傻——有时当你犯了一个愚蠢的错误并解决它时，你会帮助另一个犯同样愚蠢错误的人（我，在这种情况下）解决他们的问题。谢谢！
这里也有同样的问题...... chrome 并不关心丢失的“支架”。但 safari 和 android/iphone/ipod 根本不喜欢它。谢谢！

【解决方案2】：

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

您可以通过键入来解决问题，此代码只会由 webkits 解释

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

【讨论】：

我明白这一点，这就是为什么我将较小的宽度放在较大的宽度之后，以便它会覆盖。正如我所说，我在 Firefox 和 Chrome 中没有问题，所以我认为这不是订购问题，它似乎是 Safari 特有的。
即使在 iPhone 上也只使用第一个媒体查询的 CSS，即使应该使用第二个媒体查询。如果您还没有查看 Safari 中的 kgillingham.webfactional.com（如果您有的话）以查看实际问题。我认为它在 Chrome 中工作很奇怪，因为 Chrome 也是 Webkit。
感谢您的帮助！原来我的css中有一个错误，我发布了一个我自己的答案来解决它。

【解决方案3】：

我也面临媒体查询的类似问题，查询在错误的断点处工作：This thread 有一些东西可能会帮助其他人来到这里。引用

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

只是一个想法：你能在 Safari 中增加你的字体大小吗？尝试按 Command 0 以确保将其重置为默认字体大小。

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

所以，我的问题不是我想的那样。我应该将此作为新问题重新发布吗？在 FF 和 Chrome 中，当我放大网页时，上述代码中的媒体查询会启动，但在 Safari 中，它不会。我可以做些什么来让 Safari 在这里更像 FF 和 Chrome？

【讨论】：