3

我在页面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。只要宽度达到大约 642px，样式就会应用 :( 我观察到这些浏览器在更多内容时会更快地触发 min-width，即使在最大宽度条件下甚至在另一个网站（由我构建）上也是如此。

问题可能出在哪里？

非常感谢！

4

2 回答 2

6

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%; }
于 2012-04-10T15:23:53.213 回答
1

我只是遇到了同样的问题并找到了解决方案，至少对我来说是这样。我没有对它进行很多测试，所以如果有什么我没有考虑到，请告诉我。

在媒体查询中，我将正文的最小宽度设置为媒体查询的最小宽度。有用！

@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

于 2012-05-04T15:25:46.303 回答