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

Question

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

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

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

下面的代码：

@media (min-width: 500) {

    //code

}

将在Chrome中以大于或等于 500px 的视口宽度执行。

但是，IE9、Firefox 和 Opera将在大于或等于 483px的视口宽度处执行该代码。

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

Answer 1

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

您目前不能强制浏览器对其进行相同处理，因此最好的选择是修改您的布局，使其与媒体查询中的宽度不紧密相关（添加额外的边距）。使用这样的布局，当它提前或延迟触发几个像素时，它不会产生太大的影响。