Geek Answers Handbook

Why is my Android device 980px wide?

I am embarrassed. I am trying to make the site responsive by playing with media queries.

according to most sources, for example this , the mediq request for use for smartphones is max-device-width: 480px and min-device-width: 320px .

But when I use these queries, my Android file still shows the “computer version” of the page. So I started changing the values ​​in the request and noticed that my phone seems to have a device width of 980px ..

Why? I really want to understand this, of course, I could just be happy that it works when using the 980, but I want to know what is happening and why? I mean, my phone should not be 980 pixels or higher, is this some kind of pixel density problem?

+4
source share
3 answers

You might want to use max-width instead of max-device-width . It could be a pixel density thing - max-device-width can represent device pixels instead of CSS pixels.

Here is the test page:

To really figure it out, you'll want to read Peter-Paul Koch, A Tale of Two Species:

And perhaps his recommendation on CSS implementation for mobile devices:

+1
source

I know this question is old, but for future people who are looking at it, this is most likely due to the fact that the OP did not set the correct meta tag. Add this to the header.

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

Please refer to the url for information related to device width:

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

0
source

More articles:


All Articles