二、解決方案

（1） 簡單粗暴

如果我們按照320px寬的設(shè)計稿去制作頁面，并且不做任何的設(shè)置，頁面會默認(rèn)自動縮放到跟手機屏幕相等的寬度（這是由于 medium-dpi是target-densitydpi的默認(rèn)值，和不同密度對應(yīng)不同縮放比例所決定的，這一切都是移動設(shè)備自動完成的 ）。所以這種解決方案，簡單，粗暴，有效。但有一個致命的缺點，對于高密度和超高密度的手機設(shè)備，頁面（特別是圖片）會失真，而且密度越多，失真越厲害。

（2） 極致完美

在這種方案中，我們采用 target-densitydpi=device-dpi，這樣一來，手機設(shè)備就會按照真實的像素數(shù)目來渲染，用專業(yè)的話來說，就是1 CSS pixels = 1 device pixels。比如對于 640960的 iphone，我們就可以做出 640960的頁面，在iphone上顯示也不會有滾動條。當(dāng)然，對于其他設(shè)備，也需制作不同尺寸的頁面，所以這種方案往往是使用媒體查詢來做成響應(yīng)式的頁面。這種方案可以在特定的分辨率下完美呈現(xiàn)，但是隨著要兼容的不同分辨率越多，成本就越高，因為需要為每一種分辨率書寫單獨的代碼。下面舉個簡單的例子：

<meta name="viewport"content="target- densitydpi =device-dpi, width=device-width " />

#header {
background:url (medium-density-image.png);
}
@media screen and (- webkit -device-pixel-ratio:1.5) {
/* CSS for high-density screens */
#header { background:url (high-density-image.png);}
}
@media screen and (- webkit -device-pixel-ratio:0.75) {
/* CSS for low-density screens */
#header { background:url (low-density-image.png);}
}

（3） 合理折中

針對安卓設(shè)備絕大多數(shù)是高密度，部分是中密度的特點，我們可以采用一個折中的方案：我們對480px寬的設(shè)計稿進行還原，但是頁面制卻做成320px寬（使用background-size來對圖片進行縮?。?，然后，讓頁面自動按照比例縮放。這樣一來，低密度的手機有滾動條（這種手機基本上已經(jīng)沒有人在用了），中密度的手機會浪費一點點流量，高密度的手機完美呈現(xiàn)，超高密度的手機輕微失真（超高密度的安卓手機很少）。這種方案的優(yōu)點非常明顯：只需要一套設(shè)計稿，一套代碼（這里只是討論安卓手機的情況）。