css - 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!