15

我正在优化响应式网站，而 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，所以我仍然希望看到一个解决方案。

4

3 回答 3

11

原来我错过了一个波浪形的大括号，所以我有如下代码：

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

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

于 2013-04-19T21:34:22.790 回答
0

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

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* put webkit CSS here*/
}
于 2013-04-12T17:24:55.590 回答
0

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

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

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

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

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

于 2020-06-11T08:26:11.027 回答