## （1） CSS pixels與device pixels CSS pixels： 瀏覽器使用的抽象單位， 主要用來在網頁上繪制內容。 device pixels： 顯示屏幕的的最小物理單位，每個dp包含自己的顏色、亮度。 等值的 CSS pixels在手機屏幕上占多大的位置，這不是固定的，這取決于很多屬性。經過分析和總結，我們可以得出這么一條公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至于 devicePixelRatio是什么東西，后面會講解） 。 ## （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。