媒体查询和安卓设备答案

【问题标题】：Media Query and Android Device媒体查询和安卓设备
【发布时间】：2013-04-09 21:28:03
【问题描述】：

我正在使用 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 上进行测试时，它不起作用... 我试图做很多不同的媒体查询......当我使用：320 for the Samsung W it Works!!!....可能我不了解有关android设备分辨率的一些东西...... 谁能解释一下？！谢谢

【问题讨论】：

标签： android html css media-queries

【解决方案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 上查看此article 以获取更多信息。

【讨论】：

【解决方案2】：

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

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

在响应式设计中使用 min-width 和 min-height 效果更好

【讨论】：

我在 html 的 Head 中使用了这一行...我也尝试了 min-width、max-width、min-height...但是 Android 设备不适用于声明的尺寸； )