Why is my Android device-width 980px?

Question

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

Answer 1

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">

Answer 2

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

Answer 3

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

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