媒體查詢和Android設備

我使用html5 + JQueryMobile + Phonegap開發我的第一個混合應用程序...我在三星w（android 2.3.3），Iphone 4s和Iphone5上IphoneSimulator上測試應用程序... 在主頁上，我想用不同的背景圖片爲這個設備......我嘗試使用CSS媒體Querys ...媒體查詢和Android設備

/* 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爲三星W它工作!!! ....可能我不明白somethi關於Android設備分辨率的ngs ... 有人可以解釋它嗎？！感謝

來源

2013-04-17 Loralon

你可能要檢查像素比例，以及屏幕上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瞭解更多信息。

來源

2013-04-17 09:52:23 Bigood

始終使用以下行，當你有移動媒體查詢：

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

而且它能夠更好地使用最小寬度和最小高度爲響應式設計

來源

2013-04-17 08:14:31 Extranion

我在html的Head中使用了這一行...我也嘗試了最小寬度，最大寬度，最小高度......但Android設備不能使用聲明的大小;） – Loralon

媒體查詢和Android設備

回答

相關問題