drupal - CSS3 媒体查询延迟触发

Question

我正在处理的 Drupal 站点中有一组简单的媒体查询。媒体查询正在触发，但是，每个都延迟触发像素（“最大宽度：1075 像素”在 977 像素处应用，“最大宽度：797 像素”在 724 像素处应用，这两个示例中的比例约为 90.8%）。

注意：以下代码示例是用 SASS 编写的。

@media screen and (max-width: 1075px)
@media screen and (max-width: 797px)

它发生在 OS X 10.7.4 (Lion) 上运行的 Chrome 21.0.x、Firefox 14.0.1 和 Safari 6.0 上。有任何想法吗？

score 0 · Accepted Answer

尝试：

@media only screen and (max-width:1075px)
{
}

并确保您有正确的元标记设置：

<meta name="viewport" content="width=device-width">

score 0 · Accepted Answer

我在 Internet Explorer 11 及更低版本上遇到了这个问题。我知道这不是最初帖子中受影响的浏览器之一，但这似乎是关于“媒体查询触发延迟”这个问题的唯一问题。我想为遇到同样问题的其他人分享我的解决方案。

看来您需要在 css 中使用以下行规范化视口：

@-ms-viewport { width: device-width; }

我能够在这里找到解决方案：

2 回答 2