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开始工作。其他浏览器没有扼杀错误，这部分是为什么它很难追踪。

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

Answer 2

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

你可以通过输入来解决这个问题，这个代码只是由webkits解释

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

Answer 3

我还遇到了与媒体查询类似的问题，这些查询在错误的断点处工作：This thread可能会帮助其他人来到这里。引用

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

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

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

所以，我的问题不是我的想法。我应该重新发布这个新问题吗？在FF和Chrome中，当我放大网页时，上面代码中的媒体查询会启动，但在Safari中，不会。我可以做些什么使Safari在这里更像FF和Chrome吗？

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

3 个答案: