Question

我使用html5 + JQueryMobile + Phonegap开发我的第一个混合应用...我正在测试三星w（android 2.3.3），Iphone 4s和IphoneSimulator上的应用程序... 在主页我想为这些设备使用不同的背景图像......我正在尝试使用CSS媒体查询...

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

}

媒体查询与不同的Iphone完美配合...但是当我在我的三星W（像S1和S2这样的480x800）或Galaxy S3 ADV上测试时它不起作用...... 我试图做很多不同的媒体查询...当我使用：320为三星W它工作!!! ....可能我不明白有关Android设备分辨率的事情... 有人可以解释一下吗？！感谢

Answer 1

当您对移动设备进行媒体查询时，请始终使用以下行：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

最好使用最小宽度和最小高度进行响应式设计

Answer 2

您可能也需要检查像素比率，屏幕上为1px！= css上的1px。

@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上查看article以获取更多信息。

媒体查询和Android设备

2 个答案: