浏览器和媒体查询中的不同分辨率

在CSS中我有：

@media(max-width: 1000px){ 
    body{ 
     background-color:red; 
    } 
}

，并在Firefox背景改变了1013px宽度，并在Chrome上1018px

$(window).width() jQuery中的Firefox是983px，979px铬。

这是怎么回事？我用bootstrap.css

谢谢！

2014-10-01 Ridd

它可能是滚动条大小之间的差异！不要忘了它，并根据需要使用数字！（即1000px将适用于所有浏览器） – 2014-10-01 20:52:58

您可能需要['window.innerWidth']（https://developer.mozilla.org/en-US/docs/Web/API/Window.innerWidth） – cvrebert 2014-10-01 21:42:13

这取决于浏览器如何处理涉及视口的滚动条。 Chrome和Safari（Webkit）不包含滚动条尺寸。 Firefox，Opera和IE包含滚动条尺寸。

的“宽度”媒体特征描述了输出设备的目标的显示区域的宽度。对于连续媒体，这是视口的宽度（如CSS2 9.1.1节[CSS21]所述）包括渲染滚动条的大小（如果有）。对于分页媒体，这是页面框的宽度（如CSS2第13.2节[CSS21]所述）。

本质上，Webkit浏览器不正确地处理这个问题。

2014-10-01 21:02:39

回答