CSS媒体-屏幕宽度不一致

Question

CSS

 html{
    overflow-y:scroll;
    }

JS

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

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

我试图用outerWidth()替换width() outerWidth() -结果是相同的。

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

这可以在945px (Chrome)和943px - Firefox 。

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

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

有人可以解释这种矛盾之处。

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

Answer 1

不一致是由于滚动条。

用媒体查询看这个例子

http://jsfiddle.net/CU4Q6/

div {
    background: green;
    width: 300px
}

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

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

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

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