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 — user123444555621
– user123444555621, Commented Mar 28, 2014 at 6:44

Community · Accepted Answer · 2017-05-23 12:28:49Z

2

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

edited May 23, 2017 at 12:28

CommunityBot

11 silver badge

answered Mar 28, 2014 at 6:15

Patrick Allen

2,1882 gold badges17 silver badges20 bronze badges

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

Comments

Eskiso · Accepted Answer · 2014-03-27 22:25:22Z

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, 2014 at 22:25

Eskiso

1898 bronze badges

1 Comment

LessQuesar Over a year ago

You have to move in the 550px range, where the media query is.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related