2

我使用 html5+JQueryMobile + Phonegap 开发我的第一个混合应用程序...我正在三星 w (android 2.3.3)、Iphone 4s 和 Iphone5 的 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（480x800，如 S1 和 S2）或 Galaxy S3 ADV 上测试时，它不起作用......我试图做很多不同的媒体查询...当我使用 with:320 for the Samsung W it Works!!!....可能我不了解有关 android 设备分辨率的信息...有人可以解释一下吗？！谢谢

4

2 回答 2

2

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

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

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

于 2013-04-17T08:14:31.450 回答
1

您可能还想检查像素比率，因为屏幕上的 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 的这篇文章以获取更多信息。

于 2013-04-17T09:52:23.410 回答