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

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.

该怎么办？

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

像这样:

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