移動端webapp如何應對不一樣屏幕尺寸（轉）

移動設備的用戶愈來愈多，天天android手機的激活量都已經超過130萬臺，因此咱們面向移動終端的WebAPP也開始跟進了。本文主要介紹webapp的開發與調試的相關知識和經驗，以及給出幾種可選的解決方案。

1、基本概念

（1） CSS pixels與device pixels

CSS pixels：瀏覽器使用的抽象單位， 主要用來在網頁上繪製內容。

device pixels： 顯示屏幕的的最小物理單位，每一個dp包含本身的顏色、亮度。

等值的 CSS pixels在手機屏幕上佔多大的位置，這不是固定的，這取決於不少屬性。

（2） PPI/DPI

PPI，有時也叫DPI，所表示的是每英寸所擁有的像素（pixel）數目，數值越高，即表明顯示屏可以以越高的密度顯示圖像。（注：這裏的像素，指的是device pixels。）搞清楚了PPI是什麼意思，咱們就能很容易理解PPI的計算方式了，咱們須要首先算出手機屏幕的對角線等效像素，而後處以對角線（咱們日常所說的手機屏幕尺寸就是說的手機屏幕對角線的長度），就能夠獲得PPI了。準確的計算公示你們能夠參照下圖。比較有意思的是，根據公式計算出來的iPhone 4的PPI爲330，要比蘋果官方公佈的326要高一點點。

同理，以HTC G7爲例，480*800的分辨率，3.7英寸，算出來就是252的PPI。

（3） 密度決定比例

咱們計算PPI就是爲了知道一部手機設備是屬於哪一個密度區間的，由於不一樣的密度區間，對應着不一樣的默認縮放比例，這是一個很重要的概念。

由上圖可知，PPI在120-160之間的手機被歸爲低密度手機，160-240被歸爲中密度，240-320被歸爲高密度，320以上被歸爲超高密度（Apple給了它一個上流的名字——retina）。

這些密度對應着一個特定的縮放比例值，拿咱們最熟悉的iphone4或4s來講，它們的PPI是326，屬於超高密度的手機。當咱們書寫一個寬度爲320px的頁面放到iphone中顯示，你會發現，它居然是滿寬的。這是由於，頁面被默認放大了兩倍，也就是640px，而iphone4或4s的寬，正是640px。

圖中把高密度的一類圈起來，是由於這是android手機的統計數據，在國內安卓手機市場中，高密度的設備佔了絕大多數的市場份額，這是很重要的一點，也是咱們作安卓端webapp要注意的關鍵點。

（4） viewport的使用

viewport總共有5個屬性，分別以下：

<meta name="viewport"
content="
height = [ pixel_value |device-height] ,
width = [ pixel_value |device-width ] ,
initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,
user-scalable =[yes | no] ,
target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

在這些屬性裏面，咱們重點關注`target-densitydpi`，這個屬性能夠改變設備的默認縮放。`medium-dpi`是`target-densitydpi`的默認值，若是咱們顯式定義`target-densitydpi=device-dpi`，那麼設備就會按照真實的dpi來渲染頁面。打個比方說，一張`320*480`的圖片，放在iphone4裏面，默認是佔滿屏幕的，但若是定義了`target-densitydpi=device-dpi`，那麼圖片只佔屏幕的四分之一（二分之一的平方），由於iphone4的分辨率是`640*960`。

2、解決方案

（1） 簡單粗暴

若是咱們按照320px寬的設計稿去製做頁面，而且不作任何的設置，頁面會默認自動縮放到跟手機屏幕相等的寬度（這是因爲 medium-dpi是target-densitydpi的默認值，和不一樣密度對應不一樣縮放比例所決定的，這一切都是移動設備自動完成的 ）。因此這種解決方案，簡單，粗暴，有效。但有一個致命的缺點，對於高密度和超高密度的手機設備，頁面（特別是圖片）會失真，並且密度越多，失真越厲害。

（2） 極致完美

在這種方案中，咱們採用 `target-densitydpi=device-dpi`，這樣一來，手機設備就會按照真實的像素數目來渲染，用專業的話來講，就是1 CSS pixels = 1 device pixels。好比對於 `640*960`的 iphone，咱們就能夠作出 `640*960`的頁面，在iphone上顯示也不會有滾動條。固然，對於其餘設備，也需製做不一樣尺寸的頁面，因此這種方案每每是使用媒體查詢來作成響應式的頁面。這種方案能夠在特定的分辨率下完美呈現，可是隨着要兼容的不一樣分辨率越多，成本就越高，由於須要爲每一種分辨率書寫單獨的代碼。下面舉個簡單的例子：

<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） 合理折中

針對安卓設備絕大多數是高密度，部分是中密度的特色，咱們能夠採用一個折中的方案：咱們對480px寬的設計稿進行還原，可是頁面卻作成320px寬（使用background-size來對圖片進行縮小），而後，讓頁面自動按照比例縮放。這樣一來，低密度的手機有滾動條（這種手機基本上已經沒有人在用了），中密度的手機會浪費一點點流量，高密度的手機完美呈現，超高密度的手機輕微失真（超高密度的安卓手機不多）。這種方案的優勢很是明顯：只須要一套設計稿，一套代碼（只考慮安卓手機的狀況）。