css - 媒体查询最小宽度在 Opera、FF 和 IE 中无法正确触发

Question

我在页面上使用媒体查询 http://test.lovecpokladu.cz/detail-mince?id=2461像这样:

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

并使用这个元视口(viewport)标签:

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

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

问题出在 Opera、IE 和 Firefox 上。一旦宽度达到约 642px，样式就会应用 :( 我观察到这些浏览器在更多内容时会更快地触发最小宽度，即使在最大宽度条件下，甚至在另一个网站(由我构建)上也是如此。

问题出在哪里？

非常感谢!

Answer 1

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

要做什么？

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

像这样:

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