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

Question

您好我遇到了问题。

在CSS中我得到了：

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

并且FireFox背景在1013像素宽度上更改，在Chrome中在1018像素上更改

FireFox中jquery中的

$(window).width()为983px，Chrome为979px。

它发生了什么？我使用bootstrap.css

谢谢！

Answer 1

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

根据W3C Media Queries

  

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

基本上Webkit浏览器处理错误。