window width in JS doesn't match max-width CSS

Question

It looks like in chrome:

$(window).width()

is not matching the CSS3 media queries, when there are scroll bars. Without scrollbars it matches fine.

Does anyone know a good work around?

Here is the example: http://codepen.io/krismeister/pen/LmJFt/

Make your browser, about 600px wide then drag across teh 550px width. Then toggle the scrollbars. I'm on chrome Version 33.0.1750.152

possible duplicate of [CSS media queries and JavaScript window width do not match](http://stackoverflow.com/questions/11309859/css-media-queries-and-javascript-window-width-do-not-match) — user123444555621, Mar 28 '14 at 06:44

score 2 · Answer 1 · edited May 23 '17 at 12:28

I found this workaround on a similar stack thread:

CSS media queries and JavaScript window width do not match

Got a jsFiddle to work for you. http://jsfiddle.net/j839b/

Using this

function recordWidth(){
  var w=window,
      d=document,
      e=d.documentElement,
      g=d.getElementsByTagName('body')[0],
      x=w.innerWidth||e.clientWidth||g.clientWidth,
      y=w.innerHeight||e.clientHeight||g.clientHeight;
    $('#last-width').text(x);
}

From http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript

score 0 · Answer 2 · answered Mar 27 '14 at 22:25

0

Im on chrome and seems to change with me: No scrolls: last recorded width - win:1920, doc:1920, body:1904 With scrolls: last recorded width - win:1905, doc:1905, body:1889

answered Mar 27 '14 at 22:25

Eskiso

179
6

You have to move in the 550px range, where the media query is. – LessQuesar Mar 27 '14 at 22:31

window width in JS doesn't match max-width CSS

2 Answers2