CSS媒体 - 屏幕宽度不一致

html{ 
    overflow-y:scroll; 
    }

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

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

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

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

这对执行和945px (Chrome)943px - Firefox。

也许，scrolbar是15px（945 + 15 = 960）

我的显示设置（赢XP）是 - 1024x768。

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

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

2014-04-03 bonaca

由于滚动条不一致，如果您想要以最大宽度960运行某些内容，请使用媒体查询。如果您需要同步js和媒体查询宽度（它们是不同的），那么您可以在css中设置一个css规则并检查js中的那个^^ – Huangism

^^这。宽度是不同的，因为浏览器的渲染方式不同 - 与页面内容无关，而是实际的浏览器应用程序本身。 – Archer

@黄色，你说这个：屏幕宽度是不同的窗口，jQuery和CSS？而且，如果css方式是有效的，960是包含还是不包含滚动条？ – bonaca

不一致是由于滚动条。

看看下面这个例子使用媒体查询

div { 
    background: green; 
    width: 300px 
} 

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

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

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

重要的是要指出，人们现在使用各种不同的设备来查看网页，以确切的宽度为目标并不重要。

2014-04-03 17:59:57 Huangism

回答