二、解決方案

（1） 簡單粗暴

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

（2） 極致完美

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

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