Question

css

 html{
    overflow-y:scroll;
    }

js

function showW(){
    var a=($(window).width());
    $('#show').html(a);
}

Chrome中的结果为1009。 Firefox中的结果为1007。为什么？真相是什么？

我尝试将width()替换为outerWidth() - 结果相同。

@media only screen and (max-width:960px){...

这将在945px (Chrome)和943px - Firefox上执行。

也许，滚动条是15px（945 + 15 = 960）

我的显示设置（win xp）为 - 1024x768。

有人可以解释这种不一致。

我的最终目标是在所有浏览器中至少在Chrome和Firefox中960 px（包括滚动条）执行css媒体。

Answer 1

不一致是由滚动条引起的。

使用媒体查询

查看此示例

div {
    background: green;
    width: 300px
}

@media only screen and (max-width:300px){
    div {
        background: red;
    }
}

滚动条覆盖框后，您可以看到框更改颜色。因此，媒体查询在存在时使用滚动条输出窗口宽度。在iPad上，媒体查询的宽度是屏幕大小（包括滚动条）。这是有道理的，因为您不希望在滚动条出现时更改宽度，因为如果发生这种情况，则可能有媒体查询以2非常接近的宽度改变网站

如果您需要将媒体查询的宽度同步到js。然后你可以为一个不可见元素或一个可见元素（无论如何）添加一个css规则，然后在调整窗口大小时使用js来检查那个css属性。

重要的是要注意人们现在使用各种不同的设备来查看网页，定位一个确切的宽度并不太重要。