为什么window.width小于媒体查询中设置的视口宽度

我很困惑，仍然不知道如何用合适的语言解释这一点。到目前为止，我已经使用断点并设置了媒体查询。使用的断点变量如下所示：

$menustatictofixed: min-width 900px;

$breakpoint-to-ems 设置为 true。我根据以下 jQuery 片段的像素值布置了页面及其所有断点变量：

$('body').append('<div style="position: fixed; bottom: 0; right: 0; display: inline-block; font-weight: bold; padding: 5px 7px; border-radius: 5px 0 0 0; background: green; color: white; z-index: 9999;">Viewport width <span id="width"></span> px</div>');
var viewportWidth = $(window).width()
$('#width').text(viewportWidth);
$(window).resize(function() {
  var viewportWidth = $(window).width();
    $('#width').text(viewportWidth);
});

一切看起来都很干净。但在过去的一两天里，我在为模式设置最后一个断点并使事情表现得可预测时遇到了问题。不知怎的，那些一开始看起来干净整洁的事情，我现在在逻辑上高度怀疑，实际上是不合适的，而且不知怎的一团糟。因为如果你看一下以下内容截屏 https://dl.dropboxusercontent.com/u/8578/viewportconfusion.png不知何故，窗口的宽度（在 Chrome 中）与使用 window.width 的 jQuery 片段的宽度不同。如果我将 window.width 替换为 window.innerWidth 以最终排除滚动条，也没有什么区别。获得正确结果的唯一方法是在方程中添加 15 个像素：

var viewportWidth = $(window).width() + 15;

整个方程中唯一的问题是 window.width 是错误的函数选择，最好选择例如document.documentElement.clientWidth 或其他内容或...？ 15 个像素代表什么，它以一种有点hacky 的方式解决了上述问题？最好的问候拉尔夫

这对我有用：CSS 媒体查询和 JavaScript 窗口宽度不匹配 https://stackoverflow.com/questions/11309859/css-media-queries-and-javascript-window-width-do-not-match.

而不是使用$(window).width();其中包括滚动条获取内部宽度，如下所示：

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 vpWidth = viewport().width; // This should match your media query