我一直试图理解窗口宽度的确定方式,我想知道它是否与CSS和jQuery不同.
例如,我有CSS媒体查询：
@media (max-width: 979px) {
/*my css here*/
}
还有一些jQuery：
if ($(window).width() < 979) {
//my jQuery here
}
我希望如下：
– 浏览器调整大小时&刷新为980px,上述两个都将被忽略
– 浏览器调整大小时&刷新为978px,上述两个都将激活.
然而,我发现的是
– jQuery和CSS直到大约964px及以下才开始播放.
– 有时(如果我启用了window.resize)jQuery和CSS以单独的宽度(相隔几个像素)启动.
任何人都可以了解这里发生的事情吗？
顺便说一下,我将窗口宽度基于Firebug的布局查看器.
解决方法
问题与滚动条宽度有关：window.innerWidth将返回CSS媒体查询读取的正确值.请注意$(window).innerWidth()将返回错误的值.
function viewport() {
var e = window,a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ],height : e[ a+'Height' ] };
}
var value = viewport().width;
