Question

To help with responsive design I’ve got a DIV called #dimensions in position:absolute that gives me the width of my browser window at any time:

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

Problem is, there’s always a 20-pixel difference between what jQuery(‘body’) says (for example, 960px) and the actual browser width at which my media query (for example, “@media screen and (max-width: 960px)”) is actually executed.

Why is that and how to fix it ?

Answer 1

That sounds like the scroll bar.

Check out:

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