Media queries not behaving as expected on Android

问题:

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?

回答1:

I think you need to do a device resolution detection in your media query along the lines of

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}  

Check David Calhoun's excellent article on mobile best practices.

回答2:

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!

回答3:

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

回答4:

I was having the same problems while working on a Cordova application for Android platform. Thanks to the last answer, I tried to find out where were the differences between my media query and the width of the devices screen.

I first tried :

@media only screen and (max-device-width: 480px) { ... }

To match devices like HTC Desire HD | Samsung Galaxy S. But I also had to do specific corrections for the Samsung Galaxy Note, so I used :

@media only screen and (min-device-width: 481px) { ... }

But those resolutions, as said before, are not really used like that in the web view, the pixel density has the values changed.

So I wanted to know how many pixels in width were recognized in both DHD and SGS, and then in SGN :

window.innerWidth

For the 480px width phones, I had actually 320px recognized. For the 800px Galaxy Note, I only had 500px recognized. When I saw that, I adjusted my media queries and it worked.

回答5:

here are a few things I have found in my experience and it may be due to the higher resolution detection. My favorite test phone is 320px(max-device-width) X 480px(max-device-width) in portrait view. But depending on which mobile browser I use the max-width can be up to 850px!! Opera mobile uses 850px as its default max-width, even though its on a device of max-device-width 320px. Better yet; the built in Andriod browser on this device has a default max-width of 550px. Dolphin defaults to the same max-width, 550px. I don't usually test on FireFox mobile but since it is a gecko based browser like Opera, I wouldn't be surprised if it falls into the 850px range. Does anybody know or tested it?

i typically use a 3 condition media query when addressing 320 X 480 devices.

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

also i usually place this meta tag in my header on the main pageenter code here

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The following didnt seem to help me, that's when I did some more research and figured out the info above. <meta name="viewport" content="width=device-width" /> Hope it helps someone else.

回答6:

Since cell phones are an ever-growing black hole of resolution confusion, you need to tell them to identify themselves. You also need to set the scaling to 1 and take away user scaling. When I put this in my code, it does the trick for me.

Insert this snippet in the head of your HTML on the line below the <meta character...> tag.

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

回答7:

1. Convert all px values to em values by dividing them by 16 (so 16px will become 1 em). This makes sure, that sized have the correct proportion regardless on which font is used.
2. Add to your meta viewport: target-densitydpi=medium-dpi. This makes sure, that the em- sizes behave equally on all (most?) devices