Media queries not behaving as expected on Android

Question

I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.

Why is the 480x720 (second media query) defaulting to the first media query?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

What is expected:

What is actually happening:

Why is the 480x720 (second media query) defaulting to the first media query?

Answer 1

I am a newbie on android and CSS.

I resolved the android not giving they real size with one line in the header of my index.html file:

<meta name="viewport" content="width=device-width" />

From then on, my CSS files did what I expected!

Answer 2

So after doing LOADS of research i have come to this conclusion, Android phones that say they are 480px by 720px (800px or 854px) are actually not, they use a higher screen density to make elements look larger so they actually run at 320px by XXX, but the user can change the resolution to a lower spec if they so wish. The reason that the media query was not working, was because the sizes were not relevant to the device in question.

If your on the SDK i changed the screen density down to 160 to accommodate 480px wide.

And i can confirm i have tested this on the SDK and 2x Handsets.

Note: this was my personal experience it might be different for other users