媒体查询和Android设备 [英] Media Query and Android Device

问题描述

我使用html5 + JQueryMobile + Phonegap开发了我的第一个混合应用程序...我正在三星w(android 2.3.3)，Iphone 4s和Iphone5的IphoneSimulator上测试该应用程序... 在首页中，我想为此设备使用不同的背景图片...我正在尝试使用CSS Media Querys ...

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%;
}

}

Media Query可以完美地与其他Iphone配合使用...但是当我在我的Samsung W(480x800，如S1和S2)或Galaxy S3 ADV上进行测试时，它不起作用... 我试图做很多不同的媒体查询...当我与三星W一起使用:320时，它可以正常工作!!! .......我可能不了解有关android设备分辨率的一些信息... 有人可以解释吗? 谢谢

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

推荐答案

您可能还需要检查像素比率，例如屏幕上的1px！= css上的1px.

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) 

在quirksmode上查看此文章以获得更多信息.

Check this article on quirksmode for further information.

这篇关于媒体查询和Android设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！