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

Question

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

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

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

差异：

1. 在Chrome中，媒体查询的触发点为1190像素。在所有其他浏览器中，触发点为1173px。差异是17px。

2. 17px也是浏览器实际宽度的差异 本身。那是什么意思？我在Chrome和Firefox上触发了媒体查询之前和之后的屏幕截图。在photoshop中，我保持两个浏览器的jpg图像的宽度一致。出于某种原因，媒体查询会在除Chrome之外的每个浏览器中触发17px。

实际的媒体查询CSS代码：

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

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

}


@media (max-width: 1189px) {

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

}

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

Answer 1

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

Answer 2

真正的区别在于基于chrome的浏览器考虑窗口/文档宽度的方式。在基于chrome的浏览器中，没有考虑正确的滚动条宽度（可能是因为移动浏览器必须这样做 - 移动浏览器中的滚动条是＆＃34;虚拟＆＃34;并且放在文档的前面，而不是外部文件的宽度）。

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