———— 學習前端開發過程中遇到了不少的坑，現在發現一個就記錄一個吧
像素整理
之前一直對手機尺寸（iphone4s：3.5英寸）和分辨率（640*960）概念不是特別清晰，簡單做一下總結。
設備像素 DP（device pixels）
一個屏幕都是由一個一個像素組建而成的，每個像素都對應一個小點。我們常見的 640*960 像素就說明了一個屏幕中包含了多少個小點（像素點），640列與960行像素點，乘一下就知道有多少個了，反正很多很多個。沒錯，手機中顯示的任何圖形和圖像都是由這些小點組成。
PS：一個手機屏幕的尺寸並不能代表里面有多少像素點 —— iphone3GS（320x480）與iphone4s（640*960），屏幕大小卻同為3.5英寸。
像素密度 PPI（pixels per inch）
每英寸長度的像素點數量。計算公式（引用自百度百科），勾股定理，很好理解。iphone4s-PPI=√(640^2+960^2)/3.5
設備獨立像素 DIP （device independent pixels）
在web瀏覽器中，傳統開發並不考慮到任何縮放，1px實際等於1個物理像素點（1pixel），如果引用到移動端。設置一個<div>高度為80px，那么理論上：
- iphone3GS（320*480），顯示480/80=6個<div>元素
- iphone4S（640*960），顯示960/80=12個<div>元素
這樣同樣大小的屏幕，顯示的信息量就會完全不同，4s雖然能顯示更多信息，但是屏幕太小反而其他信息視覺上顯得小，效果不佳。（盜圖）
在移動端上，我們會追求同一屏幕大小，顯示出同樣的效果，而對其物理像素做出調整，這時候我們需要用到dip。即在4S上用4個物理像素去實現3GS上1個物理像素的效果。（更加細膩的顯示，4S屏幕也就是Retina屏）
一台設備上的DP和DIP一樣，都是固定的。例如iphone的邏輯分辨率：
- iPhone5 ：分辨率 320 * 568，物理像素 640 * 1136，@2x（倍率）
- iPhone6：分辨率 375 * 667，物理像素 750 * 1334，@2x
- iPhone6 Plus ：分辨率 414 * 736，物理像素1242 * 2208，@3x
PS：在PC操作系統中，我們常會修改分辨率，這里修改的就是邏輯分辨率。但在前端移動開發的時候我們完全可以將它們當作定值。
設備像素比（DPR）
上面用4S 640*960 的物理分辨率，去實現 320*480 的邏輯分辨率：
（640*960）/（320*480） = 4，即1個邏輯像素在4s上要用4個物理像素（2 * 2）。這里我們定義為2倍（@2x）
由此得出：當這個比率為3:1時，使用9（3 * 3）個設備像素顯示1個CSS像素，DPR為3（@3x）
結論：
DPR = 屏幕橫向設備像素 / 理想視口的寬dpr = window.devicePixelRatio
CSS像素
css中使用的px就是css像素，“ width=12px ”。css像素也是一個虛擬像素，因為...
css像素的大小是很容易變化的。當我們縮放頁面的時候，元素的css像素數量不會改變，改變的只是每個css像素的大小。也就是說width: 128px的元素在縮放200%以后，寬度依然是128個css像素，只不過每個css像素的寬度和高度變為原來的兩倍。如果原本元素寬度為128個設備像素，那么縮放200%以后元素寬度為256個設備像素（css像素寬度始終是128）。
在沒有任何縮放的情況下（即縮放值 = 1），1個CSS像素 = 1個DIP。
一般情況下，在縮放比例為1的時候。css像素100*100的圖片會由設備獨立像素DIP 100*100顯示。每個DIP會根據DPR（又稱倍率）來顯示，如果倍率為 @2x，那么1個DIP會由4個設備像素顯示。原本css像素100*100的圖片，會由400*400的物理像素點來進行顯示，這種情況下，圖片會顯得失真。最好使用css400*400圖片來進行顯示。
————————————————————————————————————————————————
我們在移動開發中也經常會用
<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">這種情況下瀏覽器視口布局與網頁布局大小一致，也不支持縮放。1個CSS像素=1個DIP，基於手機屏幕寬度來進行布局，更為直觀。