我在页面上使用媒体查询 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,样式就会应用 :( 我观察到这些浏览器在更多内容时会更快地触发最小宽度,即使在最大宽度条件下,甚至在另一个网站(由我构建)上也是如此。
问题出在哪里?
非常感谢!
最佳答案
BODY 或 HTML 中滚动条的宽度问题 - 大约 16-18 像素。
要做什么?
- 错误的解决方案 - 设置为 BODY 或 HTML
overflow-y: scroll
。 - 实验性解决方案 - 尝试将滚动条从 BODY 或 HTML 移动到第一个包装器 DIV。
像这样:
body, html { overflow: hidden; height: 100%; }
div.wrapper { overflow: auto; height: 100%; }
关于css - 媒体查询最小宽度在 Opera、FF 和 IE 中无法正确触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10063787/