Why does jQuery .width() does not match css media query in mobile?

Asked Sep 23 '14 at 20:36

Active Sep 25 '14 at 18:47

Viewed 394 times

I would like to start of by stating I am asking why this is, not how get around it. I am well aware of these sources here:

I have a media query implemented that is being called correctly everywhere:

@media all and (max-width:620px), (max-device-width:620px){...}

However, when I try to get the width through jQuery:

alert($(window).width());

The value returns as 980.

I have found that using .innerWidth() yields the same result as .width().

According to jQuery API $(window).width() returns the width of the browser viewport.

So why is it different from the css media query?

edited May 23 '17 at 11:57

Community

asked Sep 23 '14 at 20:36

Crystal Miller

does the top solution here answer your question? http://stackoverflow.com/questions/11309859/css-media-queries-and-javascript-window-width-do-not-match – Adam Fratino Sep 23 '14 at 20:44
It is not do to a scrollbar, as there is not only no scrollbar on a mobile, but there is no browser scroll bar that I know of that is 360px wide. – Crystal Miller Sep 23 '14 at 20:50
Have you set the viewport meta? https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag – Adam Fratino Sep 23 '14 at 20:51
Yes, I have, but this would not explain why the jQuery value & media query value are different. – Crystal Miller Sep 23 '14 at 20:54
Are you sure it is a 360px difference? It sound high to me... – Karl-André Gagnon Sep 23 '14 at 20:57
It's at least a 360px difference. The media query is working & is set to 620px, the dimensions of the device is 534 x 854, & the value returned through jQuery is 980. – Crystal Miller Sep 23 '14 at 21:18

0 Answers0