css - 如何强制所有浏览器为媒体查询一致地测量视口(viewport)宽度

Question

显然 Chrome 在评估媒体查询时不包括滚动条宽度 (~17px)。

IE、Firefox 和 Opera 确实将滚动条宽度计为视口(viewport)的一部分。

例如，假设视口(viewport)宽度为 500 像素，滚动条为 17 像素。

下面的代码:

@media (min-width: 500) {

    //code

}

将在 Chrome 中以大于或等于 500 像素的视口(viewport)宽度执行。

但是，IE9、Firefox 和 Opera 将在视口(viewport)宽度大于或等于 483 像素时执行该代码。

我的问题:有没有办法强制所有浏览器在执行媒体查询时将滚动条宽度包含到视口(viewport)宽度或从视口(viewport)宽度中排除？

Answer 1

IE、Firefox 和 Opera follow the W3C spec 在媒体查询中包含滚动条宽度，而 Webkit 浏览器则没有。

目前您不能强制浏览器以同样的方式对待它，因此最好的选择是修改您的布局，使其与媒体查询中的宽度不那么紧密相关(添加额外的边距)。使用这样的布局，当它提前或延迟触发几个像素时，不会产生太大的差异。