媒体查询最小宽度在Opera，FF和IE中无法正确触发 [英] Media Queries min-width not firing correctly in Opera, FF and IE

问题描述

我在网页上使用媒体查询 http://test.lovecpokladu.cz/detail -mince？id = 2461 like this：

I use media queries on a page http://test.lovecpokladu.cz/detail-mince?id=2461 like this:

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

meta viewport tag：

and use this meta viewport tag:

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

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

When I resize Chrome's window to 660px (measuring just the HTML page, not window borders), styles apply correctly. Styles don't apply in 659px, which is correct.

问题是与Opera，IE和Firefox。这些样式适用于宽度匹配大约642px：（我观察到这些浏览器在更大的内容即使在最大宽度条件甚至在另一个网站（由我建造）更快的内容发布最小宽度。

Problem is with Opera, IE and Firefox. The styles apply as soons as width hits about 642px :( I observe these browsers firing min-width sooner at more content even in max-width condition and even on another website (built by me).

哪里可能有问题？

非常感谢。

推荐答案

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

Problem in width of scrollbar in BODY or HTML - it about 16-18px.

该怎么办？

1. 错误解决方案 - 设置为BODY或HTML overflow-y：scroll 。


2. 实验解决方案 - 尝试将滚动条从BODY或HTML移动到第一个包装程序DIV。

像这样：

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

这篇关于媒体查询最小宽度在Opera，FF和IE中无法正确触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！