Jquery css媒体-屏幕宽度不一致

css

js

铬的结果为

1009

。Firefox中的结果是

1007

。为什么？真相是什么

我尝试将

width（）

替换为

outerWidth（）

——结果相同

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

这在

945px（Chrome）

和

943px-Firefox

上执行

也许，scrolbar是

15px

（945+15=960）

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

1024x768

有人能解释一下这种矛盾吗

---

我的最终目标是在所有浏览器中，或者至少在Chrome和Firefox中，在

960 px

（包括滚动条）上真正执行css媒体。

不一致是由于滚动条造成的

请看这个使用媒体查询的示例

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

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

---

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

由于滚动条的原因，不一致，如果您想以最大宽度960运行某些内容，请使用媒体查询。如果您需要同步js和媒体查询宽度（它们是不同的），那么您可以在css中设置css规则，并在js^^中对此进行检查。宽度的不同是因为浏览器呈现方式的不同-与页面内容无关，但与实际的浏览器应用程序本身无关。@Huangism，你说过：windows、jquery和css的屏幕宽度不同吗？而且，如果css方式是有效的，960是否包括或排除scrolbar？

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

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

div {
    background: green;
    width: 300px
}

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