CSS 媒体 - 屏幕宽度不一致

Question

css

 html{
    overflow-y:scroll;
    }

.js

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

铬的结果是1009。火狐的结果是1007 .为什么？真相是什么？

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

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

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

也许，斯克罗巴是15px（945+15=960）

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

有人可以解释这种不一致吗？

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

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 属性。

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