媒体查询最小宽度在 Opera、FF 和 IE 中未正确触发

Posted 2023-03-06

【中文标题】媒体查询最小宽度在 Opera、FF 和 IE 中未正确触发

【英文标题】：Media Queries min-width not firing correctly in Opera, FF and IE

【发布时间】：2012-04-21 06:28:42

【问题描述】：

我在页面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 的窗口大小调整为 660 像素（仅测量 html 页面，而不是窗口边框）时，样式会正确应用。样式不适用于 659px，这是正确的。

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

问题可能出在哪里？

非常感谢！

【问题讨论】：

差别基本上是垂直滚动条的宽度吗？

【参考方案1】：

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

怎么办？

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

像这样：

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

【讨论】：

谢谢，我不知道是因为滚动条。第一个解决方案在所有现代浏览器中都不起作用，第二个单词在所有现代浏览器中都不起作用，但在 IE7 中并没有多大作用，在 IE7 中，所有相对、绝对（甚至可能是正常）定位的元素都将它们的位置固定在屏幕上。

无论如何，根据this article，基于 Webkit 的浏览器不遵循 W3C 规范，该规范称视口是测量的包括滚动条。鉴于 Webkit 浏览器统治移动网络这一事实，我们可能会看到这种行为在 Webkit 和 W3 + 次要浏览器之间合并。无论如何，这真的很烦人，我很沮丧:(

顺便说一句，只改变 html 和 body 的 CSS 就足够了：htmloverflow:hidden;height:100%; body overflow:auto;height:100%

谢谢你！为我节省了很多时间的头痛......我欠你一袋咖啡！

这个解决方案很棒，但不幸的是它可能会改变一些知名 jQuery 插件的默认行为。

【参考方案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

【讨论】：

谢谢！下次我会测试它。目前，我为所有浏览器设置了足够安全的媒体查询宽度。