计算窗口宽度，包括滚动条 - CSS 媒体查询与 JS答案

【问题标题】：Calculate window width including scrollbar - CSS Media queries vs. JS计算窗口宽度，包括滚动条 - CSS 媒体查询与 JS
【发布时间】：2012-12-26 09:24:03
【问题描述】：

假设我已经正确推断出问题，似乎 CSS min-screen 宽度补偿了滚动条（正如预期的那样），而 JS 似乎没有做同样的事情:(

我在 Mac OSX 上使用 Firefox。我不确定这是否是特定于浏览器的，但我想知道是否有针对此问题的通用解决方案。

我创建了一个JS fiddle to demonstrate the problem。在我的浏览器中，CSS和我的JS计算的宽度有15px的差异。

有人遇到过这种情况吗？

【问题讨论】：

我发现了一个类似的问题，有人建议使用$('body').innerWidth()，这似乎对他们有用。我认为这看起来很有希望，但就我而言，它似乎在$(window).width() 产生了相同的结果。不知道有什么区别。

标签： javascript jquery css window media-queries

【解决方案1】：

我似乎找到了问题的答案，但我不确定这是否是计算正确宽度的最有效方法。

思路是给body元素overflow:hidden;，然后运行函数计算窗口宽度，然后去掉overflow:hidden;样式。

像这样：

function minScreen480(){

    document.body.style.overflow = "hidden";
        if ($(window).width() >= 480) {
            // Do stuff
        }else{
            // Do stuff
        }
    document.body.style.overflow = "";
}

$(window).resize(function(){
    minScreen480();
}).trigger('resize');

似乎有效。这写得更好吗？

【讨论】：