Question

我在页面http://test.lovecpokladu.cz/detail-mince?id=2461上使用媒体查询，如下所示：

@media all and (min-width: 660px) {
    ... styles for box decoration ...
}

并使用此元视口标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

当我将Chrome浏览器的窗口大小调整为660px（仅测量HTML页面，而不是窗口边框）时，样式正确应用。样式不适用于659px，这是正确的。

Opera，IE和Firefox存在问题。这些样式适用于宽度约为642px的soons :(我观察这些浏览器即使在最大宽度条件下甚至在另一个网站（由我建立）上也会在更多内容上更快地触发最小宽度。

哪里可能是问题？

非常感谢！

Answer 1

BODY或HTML中滚动条宽度的问题 - 大约是16-18px。

怎么办？

错误的解决方案 - 设置为BODY或HTML overflow-y: scroll。
实验解决方案 - 尝试将滚动条从BODY或HTML移动到第一个包装器DIV。

像这样：

body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }

Answer 2

我遇到了同样的问题并找到了解决方案，至少对我而言。我没有对它进行过多次测试，所以如果有什么我没有考虑过，请告诉我。

在媒体查询中，我将正文的最小宽度设置为媒体查询的最小宽度。它有效！

@media only screen
and (min-width : 1060px) {
    body{
        min-width: 1060px;
    }
    #main-content{
        text-align: right;
        padding-left: 0;
    }
}

我在这里为这个问题和解决方案做了一个例子：

http://gehirnstroem.at/media-query.htm

http://gehirnstroem.at/media-query-solved.htm

媒体查询min-width在Opera，FF和IE中未正确触发

2 个答案: