CSS媒体屏幕宽度与jQuery（window）.width（）

Question

I am making some nifty CSS3 animations assisted by some jquery and in the process of making those animated functions responsive, I stumbled upon a strange thing, very strange indeed.

The media query I am calling states

@media screen and (max-width: 1024px)

But when I call the window width using JavaScript it reveals that it actually triggers at window width 1009px

console.log('window.size: '+$(document).width());

I must admit that I am completely confused by this one, anyone have any bright idea? :)

Answer 1

After @Pete pointed me in the right direction and ispired by a small pice of code I found somewhere, I came up with this:

(I would give credits to the person who came up with the below if I could remember where I found it, but posting it here in case someone else needs a similar solution)

function scrollBarWidth() {
    jQuery("html").css("overflow", 'hidden');
    var width = jQuery("html").width();
    jQuery("html").css("overflow", 'scroll');
    width -= jQuery("html").width(); 
    if(!width){
        width = document.body.offsetWidth - document.body.clientWidth;
        jQuery("body").css("overflow", '');
    }
    return width; 
}

Answer 2

I have had the same issue, I believe this is something to do with jQuery, the solution I have found that may be a little more light weight that a whole function, is to use

window.innerWidth 

instead of using jQuery to select the body/window width.

Here is a fiddle of it working without the jQuery selector http://jsfiddle.net/wf40d79x/

using

$(window).resize(function() {
    console.log(window.innerWidth);
});

and here is it breaking, WITH the jQuery selector http://jsfiddle.net/4bgzf1Lp/2/

using

$(window).resize(function() {
    console.log($(window).width());
});

You'll see in the console as you bring the screen down to 600px the as the media query pops, using javascript only the console will agree with the width, whereas with jQuery it will be about 17px smaller.

Hope this helps.

Answer 3

I came across a solution which is brilliant to verify which media file is active. Add a selector which changes state or font in css media file and check in js to check if state has changed.

.width-verify{
    display: none;
}

@media only screen and (min-width: 768px) {
    .width-verify {
        display: block;
    }
}

JS:

if ($('.width-verify').css('display') === 'block') {
    //...
}

Thanks to http://www.acoupleofnerds.com.au/2014/09/3-ways-fix-jquerys-window-width-method-matching-media-queries/