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

But i think the problem also existed on a iphone 4, not sure about the OS version. — Millenjo, Apr 08 '13 at 10:39
@Milenjo: cool. [According to Wikipedia](http://en.wikipedia.org/wiki/HTC_Desire_HD), the HTC Desire HD has a 480x800 pixel screen. So it should match `max-device-width: 480px`, unless I'm missing something (which is quite possible). — Paul D. Waite, Apr 08 '13 at 10:41
Yes exactly, that is the question and the problem, why it reacts when i set it to 980. Believe me i've checked wikipedia and various other sources as well. — Millenjo, Apr 08 '13 at 10:43

score 20 · Answer 1 · answered Mar 22 '14 at 06:10

20

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

answered Mar 22 '14 at 06:10

Tyler McGinnis

34,836
16
72
77

Not really, the problem exists whether or not you add the viewport meta tag. It has to do with the difference between max-width and max-device-width. – dramzy Jul 07 '15 at 16:48
2

Fixed it for me! :D – Michael Seltenreich Feb 12 '17 at 01:30
2

After spending half a day figuring out why media queries are not working, this fix, solved the problem! – Arpan Jain Jun 07 '20 at 07:11

score 2 · Accepted Answer · answered Apr 08 '13 at 10:47

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

And possibly his recommendation on doing CSS for mobile devices:

http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

answered Apr 08 '13 at 10:47

Paul D. Waite

96,640
56
199
270

1

solved the problem for me, thank you for those useful links, will plow em through! – Millenjo Apr 08 '13 at 10:57
@Millenjo: Excellent. Yeah that `` tag is the only way I can keep sane when writing mobile CSS (although I just use ``, as I think `maximum-scale=1` disables user zooming, which I don’t want to do by default). You’re very welcome, it’s a confusing area: took me quite a while to get my head around it. They key thing to remember is that a device pixel (i.e. one physical pixel on the device’s screen) doesn’t necessarily match one CSS pixel. – Paul D. Waite Apr 08 '13 at 12:06

score 0 · Answer 3 · answered Apr 08 '13 at 10:39

0

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

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

answered Apr 08 '13 at 10:39

web2008

914
4
11

1

that wasn't especially helpful, the value 980 isn't mentioned at all. And that's basically the same values i linked to – Millenjo Apr 08 '13 at 10:42
Actually, the next page on your link seems to describe my problem. – Millenjo Apr 08 '13 at 10:45

Why is my Android device-width 980px?

3 Answers3

Linked