浏览器与媒体查询触发点的差异答案

【问题标题】：Browser Differences with Media Query Trigger Points浏览器与媒体查询触发点的差异
【发布时间】：2013-02-15 14:32:56
【问题描述】：

我注意到媒体查询断点在 Chrome 与所有其他浏览器（IE9、Chrome、Opera）中的触发方式不同。

请参考以下截图帮助解释（请忽略占位符图片）。首先，断点在chrome中：

现在，让我们看看下面所有其他浏览器的媒体查询触发位置。我们将使用 Firefox 作为示例，但对于 IE9 和 Opera 也是如此。

区别：

在 chrome 中，媒体查询的触发点在 1190px。在所有其他浏览器中，触发点位于 1173px。差异是 17 像素。
17px也是浏览器实际宽度的差本身。我的意思是什么？我在 Chrome 和 Firefox 上触发媒体查询之前和之后的截图。在 Photoshop 中，我使两个浏览器的 jpg 图像的宽度保持一致。出于某种原因，媒体查询在除 Chrome 之外的所有浏览器中都会提前 17 像素触发。

实际的媒体查询 CSS 代码：

@media (min-width: 1190px) and (max-width: 1254px) {

    .visible-large {
        display: inherit !important;
    }

}


@media (max-width: 1189px) {

    .visible-large {
        display: none !important;
    }

}

我的问题：有没有办法让媒体查询在所有浏览器中同时触发？

【问题讨论】：

标签： css cross-browser media-queries

【解决方案1】：

我认为某些浏览器可能会计算溢出宽度。

【讨论】：

您是在暗示负边距之类的东西可能会导致差异？
我的意思是 chrome 不会计算媒体查询的滚动条宽度，但其他的会。
有没有办法强制所有浏览器在媒体查询方面进行一致的测量？
$('body').innerWidth();应该给你正确的宽度，但这是针对 jquery 我不知道如何通过媒体查询获得正确的宽度。
我 +1 让我走上正轨，因为我认为您认为 IE9、Firefox 和 Opera 在计算媒体查询时包含滚动条宽度是正确的。至于答案，继续搜索！

【解决方案2】：

真正的区别在于基于 chrome 的浏览器考虑窗口/文档宽度的方式。在基于 chrome 的浏览器中，不考虑右侧滚动条的宽度（可能是因为移动浏览器必须这样做 - 移动浏览器中的滚动条是“虚拟的”并放置在文档的前面，而不是文档的宽度之外） .

据我所知，为跨浏览器的媒体查询规范化文档到窗口宽度的唯一方法只能在 javascript 中完成，因为基于 chrome 的浏览器处理滚动条的方式，这有点否定首先将媒体查询引入 CSS。

【讨论】：