Media queries working at wrong browser size

Asked Dec 25 '13 at 00:51

Active Jul 04 '15 at 05:42

Viewed 676 times

I have a media query, @media screen and (max-width: 480px). When testing in Google Chrome, the browser is applying it at 448px instead of 480px. What is causing this pixel difference, and how can it be fixed?

Meta tags being used:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width" />

edited Dec 25 '13 at 00:54

Ry-

218,210
55
464
476

asked Dec 25 '13 at 00:51

mdmullendore

How are you measuring 448px? – Ry- Dec 25 '13 at 00:55
That's the size the chrome browser states. Located in the top or bottom right. – mdmullendore Dec 25 '13 at 00:59
1

Top or bottom right of what? Try checking `innerWidth` in the JavaScript console. – Ry- Dec 25 '13 at 01:01
Have a chrome browser window sizer app installed – mdmullendore Dec 25 '13 at 01:04
Try checking `innerWidth` in the JavaScript console. – Ry- Dec 25 '13 at 01:04
Try *reading* it in your JavaScript *console*. Ctrl+Shift+J (or Command+Option+J). – Ry- Dec 25 '13 at 01:09
console is detecting nothing – mdmullendore Dec 25 '13 at 01:14
1

In your console, type “innerWidth” and press Enter. A number should appear. This is the accurate width of your content area as seen by both CSS and JavaScript. – Ry- Dec 25 '13 at 01:17
your magic is from a far away land. Thank you for your help – mdmullendore Dec 25 '13 at 01:34
Possibly related: http://stackoverflow.com/questions/8146874/issue-with-css-media-queriesscrollbar – cimmanon Dec 25 '13 at 01:54

Media queries working at wrong browser size

0 Answers0