Question

我正在处理的Drupal站点中有一组简单的媒体查询。然而，媒体查询正在触发，每个触发像素延迟（“max-width：1075px”应用于977px，“max-width：797px”应用于724px，在两个示例中均为约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中正在发生这种情况。有什么想法吗？

Answer 1

尝试：

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

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

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

Answer 2

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

您似乎需要在css中使用以下行标准化视口：

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

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