Why is my Android device-width 980px?

问题:

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?

回答1:

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

回答2:

I know this question is old but for future people who look at this, this is most likely caused because the OP hasn't set the proper meta tag. Add this to the header.

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

回答3:

Please refer below URL for info related to device-width:

http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml