Width calculation is wrong

[brendanfalkowski]

The calculation is wrong. See screenshot: http://cl.ly/IyNp

xScope shows the measured width in the bottom left. The FitWeird value is 15px (the scrollbar) too wide.

The little black box is a jQuery doodad I use during dev. Its code looks like this:

/*
 * Viewport Width
 *
 * @author     Brendan Falkowski http://gravitydept.com
 * @requires   jQuery
 */

(function() {
    jQuery('body').append('<div id="viewport-width" style="position:fixed; bottom:0; left:50%; background:#000; color:#FFF; font-family:arial; font-size:14px; padding:5px 10px;">' + jQuery(document).width() + '</div>');
    var viewportWidth = jQuery('#viewport-width');

    jQuery(window).resize(function() {
        viewportWidth.html( jQuery(document).width() );
    });
})();

[davatron5000]

It looks like if you write a media query, it calculates the width of the window, not the visible area as you describe: http://cl.ly/image/060H2M212r3q - the media query is triggered at 800px though the visible area is only ~780px;

Feel free to test against this: http://jsbin.com/idujaz/3

Now it's possible this is an operating system level thing (i.e Mac OS X Lion+ don't have visible scrollbars). But I'd rather err on the side of reporting when then browser thinks it should trigger a media query.

[brendanfalkowski]

That's not true. The media query fires on the viewport width not the window width.

If your browser uses invisible scrollbars (like Lion+) the viewport and window width are identical, and FitWeird probably calculates as expected.

But if regular scrollbars (as if the window had overflow:auto defined) are used in the browser (like Snow Leopard down and probably Windows everything) then the calculation is wrong.

When the scrollbar is active, you can see the viewport is narrower than the window. In the test case you posted the media query hasn't fired yet, but according to FitWeird it should have:

http://cl.ly/Iync

Note: I'm on Snow Leopard using Chrome.

[davatron5000]

Ok. Cool. I'll work on it.

[brendanfalkowski]

I did it the lazy way because jQuery was available:

jQuery(document).width()

The innerWidth and outerWidth were giving me issues cross-browser. It might be more reliable to test:

jQuery('body').width();

But I'm not certain what happens if elems are positioned outside the viewport. Could be wonky.

I can test on SnowLeopard if you think you've got a fix.

[davatron5000]

It was window.outerWidth causing it. Using window.innerWidth seems to fix things and works on modern browsers. Will push a fix soon.

I'm not sure we'll need full browser support as this should cover most web developers && browsers that support media queries.

[davatron5000]

@brendanf let me know if this update works for you, i can't really test snow leopard.

[brendanfalkowski]

No dice. The MDN article says innerWidth does include the scrollbar, so I think that won't work.

[brendanfalkowski]

Just tried testing using jQuery('body').width() in my widget and that works.

If you absolutely position an element off canvas, measuring the body returns the correct value. The horiz scrollbar will appear and the jQuery(document).width() will measure (viewport + what's offscreen) which is unwanted.

Maybe try using outerWidth(); on the body element?

[brendanfalkowski]

Published mine here (with a few improvements for readability based on your code):

https://github.com/brendanf/viewport-width-helper