Why is the window.width smaller than the viewport width set in media queries

Question

I am quite puzzled and still unsure how to explain this in proper words. So far i've used and set up my media queries with Breakpoint. An used Breakpoint-variable looks like e.g.:

$menustatictofixed: min-width 900px; 

$breakpoint-to-ems is set to true. I've laid out the page with all its Breakpoint variables based on the pixel values of the following jQuery snippet:

$('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); }); 

Everything looked proper and clean. But over the last one or two days i had issues setting up the last breakpoints for a pattern and to get things behave predictable. Somehow the things that appeared to add up clean and fine in the first place, which i logically highly doubt now, are in fact improper and somehow a mess. Cuz if you take a look at the following screenshot somehow the width of the window (in Chrome) differs to the width from the jQuery snippet utilising window.width. There isn't also a difference if i would replace window.width by window.innerWidth to rule out scrollbars eventually. The only way to receive proper results is by adding 15 pixels to the equation:

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

Is the only issue in the whole equation that window.width is the wrong choice of function and it would be better to go with e.g. document.documentElement.clientWidth or something else or ... ? And for what the 15 pixels are standing for which fixed the problem above in a bit hacky way? Best regards Ralf

Answer 1

This is what worked for me: CSS media queries and JavaScript window width do not match.

Instead of using $(window).width(); which includes scrollbars get the inner width like this:

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