jQuery window width not equal to CSS's window width

Question

I'm using the following two pieces of CSS and JS code:

@media (max-width: 720px) {
    // a code to make arrows in a carousel disappear
}

if(jQuery(window).width() <= 720){
    // a code to make arrows in the carousel stop working
}

The problem with them is that the latter executes on exactly width=738px and not 720px. I suspect that this is because of browser's vertical scrollbar that has width equal to 18px in Chrome.

Is there a way to unify this? I'd like these actions to happen at the same moment in all browsers regardless of the scrollbar's width.

Tests (when browser is @ 720px and CSS has already executed):

jQuery(document).innerWidth() = 703
jQuery(window).innerWidth() = 703
jQuery(document).width() = 703
jQuery(window).width() = 703
jQuery('body').width() = 703
jQuery('html').width() = 703

Frédéric Hamidi · Accepted Answer · 2013-08-31T14:02:09.860

I had to tackle the same problem a while ago, and so far the most correct solution I found is to use media queries to pass the actual window size to Javascript. You have to follow these steps:

Add a hidden element to your page,
Use media queries to alter the max-width property of that element,
Read back the max-width property of that element through Javascript.

For instance, add the following element to your page:

<div id="currentMedia"></div>

Then write the following CSS rules:

#currentMedia {
    display: none;
}

@media (max-width: 720px) {
    /* Make arrows in the carousel disappear... */

    #currentMedia {
        max-width: 720px;
    }
}

Then, from the Javascript side, you can write:

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) {
    // Make arrows in the carousel stop working...
}

And it will be accurate regardless of the scrollbar size, since the value comes from the same media query that triggers the carousel's disappearance.

I tested this solution on all major recent browsers, and it gives correct results.

That's smart, thanks! So, there is no plain jQuery way to do this? — Atadj, Aug 30 '13 at 07:47

score 6 · Answer 2 · edited May 23 '17 at 12:13

You will find the big summary of what properties are supported on what browsers on this page on quirksmode.org.

Your best bet is probably to grab an element in the page (using document.body where supported, or document.getElementById or whatever), walk its offsetParent chain to find the topmost element, then examine that element's clientWidth and clientHeight.

innerWidth documentation

innerWidth() says this method is not applicable to window and document objects; for these, use .width()

try

How can I get the browser's scrollbar sizes?

From Alexandre Gomes Blog

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

in your code

if(jQuery(window).width()-getScrollBarWidth(); <= 720){
    // a code to make arrows in the carousel stop working
}

The [documentation](http://api.jquery.com/innerWidth/) for `innerWidth()` says *this method is not applicable to `window` and `document` objects; for these, use `.width()` instead*. — Frédéric Hamidi, Aug 30 '13 at 07:25
I tried this but I think that it doesn't work. I used `console.log()` to print the value and these are the results: http://gyazo.com/ccba301317849b000666efe3e5bdc201.png (when viewport is 734px it thinks it's 717px. JavaScript executes earlier than CSS media query. — Atadj, Aug 30 '13 at 07:32
Those 17px difference sounds like the width of a browser scrollbar. — Kevin, Aug 30 '13 at 07:34

score 1 · Answer 3 · answered Sep 21 '16 at 20:51

1

A bit outdated thread, but i've found this solution

function getWidth(){
   return ((window.innerWidth > 0) ? window.innerWidth : screen.width);
}

answered Sep 21 '16 at 20:51

Dihgg

11
4

score 0 · Answer 4 · answered Aug 30 '14 at 04:22

If you are using Bootstrap > 3 then I will suggest you something.

Bootstrap ships with .container class in its Css and predefined. And its altering with @media queries.So my working code sample for this is below.

function detectWidth(){
   var width = $('.container').eq(0).outerWidth()   ;
   console.log(width);
   if(width<750){
     // do something for XS element
   }else if(width>=750 && width<970){
     // do something for SM element
   }else if(width>=970 && width<1170){
      // do something for MD element
   }else{
    // do something for LG element
   }

}

score 0 · Answer 5 · answered Jan 07 '15 at 11:10

0

I realize this is an old thread, but I think it can still benefit from this answer.

var width = window.outerWidth;

This will give you the width of the window including scrollbars, which is what media queries use, I believe.

answered Jan 07 '15 at 11:10

koppelaar

1
2

jQuery window width not equal to CSS's window width

5 Answers5