Window width inconsistent between jQuery and CSS media query

Question

I am getting a bit of an odd result here that I can't quite understand.

In jQuery I am logging the window width by:

console.log( $(window).width() );

In my CSS I am changing the background color to red with:

@media only screen and (min-width: 768px) {

    body { background: red!important; }

}

Yet, in Firebug, the console says the window width is 756px wide, but the CSS makes the background red, which shouldn't happen until it reaches a minimum width of 768px.

See this screen grab for further clarification:

enter image description here

Can anyone explain to me why the background is red and that the CSS seems incorrect? Is it jQuery that's actually incorrect?

Also, would it have anything to do with the vertical scrollbar at all?

Rohan Kumar · Accepted Answer · 2014-04-23 12:14:41Z

3

You need to check the width of viewport like,

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

Viewport Source

Or you can use innerWidth() like,

if($(window).innerWidth() <= 751) {
   $("body").css('background','red !important'); // background red
} else {
   $("body").removeAttr('style'); // remove style attribute
}

You can use matchmedia if you are not care about IE for egs,

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

For all browsers you can try

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

See modernizr mq

answered Apr 23, 2014 at 12:14

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

A. Wolff Over a year ago

Complete post, nice one!

Michael Giovanni Pumo Over a year ago

I went with your suggestion on using Modernizr in the end, as the others felt a bit hacky and I wanted consistent results cross-browser. Thank you. It now works as expected. It seems $(window).width() does not account for the scrollbar.

Rohan Kumar Over a year ago

@MichaelGiovanniPumo yes modernizr is the best among all.

web-tiki · Accepted Answer · 2014-04-23 12:10:07Z

1

The difference is caused by the width of the scroll bar.

console.log( $(window).width() );

return the width of the viewport area (widthout the srcoll bar) whereas media query includes the scrollbar.

Scrollbar width varies between browsers.
In chrome for example, the background color change appears at 747px you can try in this fiddle with other browsers to see the diference.

edited Apr 23, 2014 at 12:10

answered Apr 23, 2014 at 11:53

web-tiki

104k33 gold badges226 silver badges258 bronze badges

3 Comments

Paulie_D Over a year ago

stackoverflow.com/questions/8794338/…

Michael Giovanni Pumo Over a year ago

Thanks for the clarification, but do you have a suggested fix?

lharby Over a year ago

You can force a scroll bar (this is used in normalize css) html { overflow-y: scroll;} then your widths should be more consistent.

sreenath · Accepted Answer · 2014-04-23 11:59:50Z

0

// Returns width of browser viewport
$( window ).width();

// Returns width of HTML document
$( document ).width();

Css will take the HTML document width. Go through this link https://api.jquery.com/width/

answered Apr 23, 2014 at 11:59

sreenath

4092 gold badges4 silver badges12 bronze badges

Comments

A. Wolff · Accepted Answer · 2014-04-23 12:07:00Z

0

You should check window width according media query for cross browser solution, something like:

var isWindowWidthMatchingQuery = window.matchMedia("only screen and (min-width: 768px)").matches;

alert(isWindowWidthMatchingQuery ); // returns true or false

See support table: http://caniuse.com/#search=matchMedia

answered Apr 23, 2014 at 12:07

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

timar · Accepted Answer · 2015-12-18 14:28:03Z

0

Don't use JavaScript to check the viewport width. It's unnecessarily complicated and prone to inconsistencies. Instead, simply check a @media-query dependent CSS attribute, i.e. of the class .navbar-toggle to check for the navbar-breakpoint (set by less variable @screen-phone), when using the collapsible bootstrap navbar:

f($(".navbar-toggle").css("display") != "none") {
    alert("Yay! I'm consistent with bootstrap!");
}

If you want to check the @screen-tablet and the @screen-desktop breakpoints, you can check the width of the .container class, or any other css selector in your bootstrap.css that depends on a suitable @media-query. Of course you can also use this technique with your own css.

edited Dec 18, 2015 at 14:28

answered Dec 18, 2015 at 14:21

timar

213 bronze badges

Comments

Patrick L. · Accepted Answer · 2018-05-30 02:47:23Z

0

An update for this question: Since jQuery 3.0 you can now $(window).outerWidth() to get the real window width including the scrollbar. It should be equal to what you can do with your CSS @media selectors

Breaking change: .outerWidth() or .outerHeight() on window includes scrollbar width/height

More informations on https://jquery.com/upgrade-guide/3.0/#breaking-change-outerwidth-or-outerheight-on-window-includes-scrollbar-width-height

answered May 30, 2018 at 2:47

Patrick L.

5266 silver badges25 bronze badges

Collectives™ on Stack Overflow

Window width inconsistent between jQuery and CSS media query

6 Answers 6

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related