响应式设计 - jQuery('body') 值和媒体查询触发器之间的差异

Question

为了帮助响应式设计，我在 position：absolute 中有一个叫做 #dimensions 的 DIV，它随时为我提供了浏览器窗口的宽度：

jQuery("#dimensions").html(jQuery('body').width());
    jQuery(window).resize(function() {
    jQuery("#dimensions").html(jQuery('body').width());
});

问题是，jQuery（'body'）所说的（例如，960px）和实际执行我的媒体查询（例如，"@media屏幕和（最大宽度：960px）"）的实际浏览器宽度之间总是有20像素的差异。

为什么会这样以及如何解决它？

Answer 1

这听起来像滚动条。

退房：

• http://matanich.com/test/viewport-width/
• https://github.com/tysonmatanich/viewportSize