Why is my Android device-width 980px?
css, media-queries, responsive-design
Solution
You might want to try using `max-width` instead of `max-device-width`. It could well be a pixel-density thing - `max-device-width` might be reporting device pixels instead of CSS pixels.
Here's a test page:
- http://jsfiddle.net/56XhE/
To really get a handle on this, you'll want to read Peter-Paul Koch's "A Tale of Two Viewports":
- http://www.quirksmode.org/mobile/viewports.html
- http://www.quirksmode.org/mobile/viewports2.html
And possibly his recommendation on doing CSS for mobile devices:
- http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
Problem
I am confused. I am trying to make a website responsive by playing around with media queries. according to most sources, for example this, the mediq-query to use for smartphones is `max-device-width: 480px` and `min-device-width: 320px`. But when i use these queries, my android 2.x does still show the "computer version" of the page. So i started changing the values on the query and noticed that my phone seems to have the device-width of 980px.. Why is that? I really want to get a grip of this, sure i could just be happy with it working when using 980 but I want to know what is going on and why? I mean my phone isn't supposed to be 980px wide or high for that matter, is it some kind of pixel density problem?