问题
i developing my first hybrid app using html5+JQueryMobile + Phonegap...i'm testing the app on a Samsung w (android 2.3.3), on a Iphone 4s and on IphoneSimulator for the Iphone5... in the home page i'd like to use different background images for this devices...i'm trying to use the CSS Media Querys...
/* IPHONE 4 - IPHONE 3*/
@media screen and (height: 480px) {
#home {
background-image:url(images/home/home_Med.png);
background-size: auto 100%;
}
}
/* GALAXY S1 - S2 */
@media screen and (width: 480px) {
#home {
background-image:url(images/home/home_Small.png);
background-size: auto 100%;
}
}
/* GALAXY S3 - IPHONE 5*/
@media screen and (height: 568px),screen and (height: 1280px) {
#home {
background-image:url(images/home/home_Big.png);
background-size: auto 100%;
}
}
the Media Query works perfectly with the differents Iphone...but when i test on my Samsung W (480x800 like S1 and S2) or in the Galaxy S3 ADV it doesn't work... i tried to do a lot of different media querys...and when i used with:320 for the Samsung W it Works!!!....probably i don't understand somethings about the android device resolution... Can someone explain it?! THanks
回答1:
You might want to check the pixel ratio as well, as 1px on screen != 1px on css.
@media only screen (-moz-min-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2)
Check this article on quirksmode for further information.
回答2:
Always use the following line when you have media queries for mobile:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Also its better to use min-width and min-height for responsive design
来源：https://stackoverflow.com/questions/16054603/media-query-and-android-device