benoît benoît - 6 months ago 38
Javascript Question

CSS media queries and JavaScript window width do not match

For a responsive template, I have a media query in my CSS:

@media screen and (max-width: 960px) {
body{
/* something */
background:red;
}
}


And, I made a jQuery function on resize to log width:

$(window).resize(function() {
console.log($(window).width());
console.log($(document).width()); /* same result */
/* something for my js navigation */
}


And there a difference with CSS detection and JS result, I have this meta:

<meta content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width" name="viewport"/>


I suppose it's due to the scrollbar (15 px). How can I do this better?

Sorry if this is a duplicate question, but I can't find where my mistake is.

Answer

You're correct about the scroll bar, it's because the CSS is using the device width, but the JS is using the document width.

What you need to do is measure the viewport width in your JS code instead of using the jQuery width function.

This code is from http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

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' ] };
}
Comments