$menustatictofixed: min-width 900px;
$ breakpoint-to-ems设置为true。我已经根据以下jQuery片段的像素值布置了其所有Breakpoint变量的页面：
$('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);
});
一切看起来都很合适，干净。但是在过去一两天里，我有一个问题设置了一个模式的最后一个断点，并使事情行事可预测。不管怎样，首先，我在逻辑上高度怀疑的事情似乎加起来清洁和罚款，实际上是不正确的，不知何故一团糟。如果你看看下面的screenshot，那么窗口的宽度(在Chrome中)与使用window.width的jQuery片段的宽度不同。如果我将通过window.innerWidth替换window.width最终排除滚动条，也没有区别。获得正确结果的唯一方法是向方程式添加15个像素：
var viewportWidth = $(window).width() + 15;
在整个方程式中唯一的问题是window.width是错误的功能选择，最好是用例如document.documentElement.clientWidth或其他或…？而为什么15像素站在哪里固定上面的问题有点黑客的方式？最好的问候拉尔夫
解决方法
媒体查询很有趣。它们在浏览器上的表现不尽相同，这意味着使用它们有时不会那么容易。例如，在OS X上的-webkit / -blink和Win8中的IE10中，滚动条覆盖在页面上。但是在-moz中，滚动条不会叠加在页面上。获取页面“可视区域”的最佳方法是以下一系列香草JavaScript(假设您有一个有效的HTML文档)：
document.body.parentNode.clientWidth
这将是找到body元素，找到它的父(在一个有效的文档中将是html元素)，然后在渲染后找到它的宽度。这将给你你有兴趣看到的宽度。这也是一个无用的宽度。
为什么你可能会问，实际的客户端宽度没有用？这不是因为它是不同的浏览器，因为它是。这是因为这不是宽带媒体查询实际测试！什么宽度的媒体查询测试是window.innerWidth，这是你现在使用的本质。
那么这个问题的解决方案是什么？那么我会说，解决方案是使用基于内容的媒体查询，而不是基于设备的媒体查询，并且可以在您的查询中有一些摆动的空间(特别是如果这个摆动空间大约为15px)。如果还没有，请阅读文章Vexing Viewports和A Pixel Identity Crisis，了解为什么您的MQ定义中潜在的15px闪烁不是世界上最糟糕的事情(鱼可能会更大)。
因此，总而言之，继续使用$ breakpoint-to-ems：true，并根据内容中断到window.innerWidth选择您的媒体查询，因为它是处理跨浏览器问题唯一合理的方式。从各种问题的粗略看，看起来好像大多数浏览器和操作系统都移动到覆盖滚动条(从Firefox 24起每个OS X浏览器都将有一个，Ubuntu的Unity UI introduced them)，所以为了将来友好，我’建议不要担心滚动条的偏移，并且浏览器看起来有点不同的网站就可以了。记住，正如Ethan Marcotte如此雄辩地说：
The Web is an Inherently Unstable Medium
