像素和DPR
我們在web開發的過程中，經常會提到「像素」這個詞，那麼，像素到底是什麼？移動端的像素與桌面端是否有區別？同樣大小的手機屏幕，爲什麼有的像素高，有的像素低？下面讓我們通過資料閱讀，一起找到這些問題的答案吧。
像素的定義
「像素」是圖像顯示的基本單位，譯自英文「pixel」，一個像素就是屏幕上能夠顯示一種特定顏色的最小區域。如下圖右側圖片中，每一小格子代表一像素：
當設備尺寸相同，但像素變得更密集時，屏幕能顯示的畫面過渡更細緻，圖像看起來就更清晰明快。由此定義了「屏幕像素密度PPI（pixel per inch）」，用於代表屏幕上每英寸可以顯示的像素點的數量：
像素的分類
像素實際上分爲兩種：
1． 物理像素：又稱設備像素(device pixels)，指設備屏幕的物理像素，一個屏幕裏的物理像素數量是固定的。
2． 邏輯像素：又稱CSS像素(CSS pixels)，是爲web開發而創造的抽象概念，用於在CSS和JavaScript中以「px」描述位置、大小和間距的單位尺寸。
由於不同的設備屏幕，特別是移動端手機屏幕尺寸千差萬別，物理像素也不一而同，在web開發過程中都是使用邏輯像素，物理像素很少會被用到。
隨着移動設備屏幕技術的發展，手機的PPI(屏幕像素密度)越來越高。一個典型的例子就是，從iPhone4開始，蘋果公司推出了retina視網膜屏幕。之所以叫做視網膜屏幕，是因爲屏幕的PPI太高，人的視網膜無法分辨出屏幕上的像素點。iPhone4的PPI提高了一倍，但屏幕尺寸卻沒有變化，這意味着同樣大小的屏幕上，像素多了一倍。
像素的增加對於同樣大小的網頁圖像，在舊手機裏全屏展示，在新手機裏卻只需要一半的屏幕就顯示出來了，剩下的另一半屏幕將成爲空白，這降低了web用戶的體驗。如何適配不同的手機屏幕，成爲web開發者需要關心的問題。
DPR
設備像素比DPR(devicePixelRatio)，是指默認屏幕內容無縮放時，物理像素和邏輯像素的比值：
DPR = 物理像素 / 邏輯像素
在JavaScript裏可以通過window.devicePixelRatio獲取到用戶設備的DPR值。
屏幕適配方案
瞭解了DPR的概念之後，我們就可以通過規則，將邏輯像素進行相應的轉換，滿足不同屏幕的顯示需要，具體規則如下：
- 當DPR爲1時，使用1（1×1）個物理像素顯示1個邏輯像素；
- 當DPR爲2時，使用4（2×2）個物理像素顯示1個邏輯像素；
- 當DPR爲3時，使用9（3×3）個物理像素顯示1個邏輯像素。
圖示如下：
對應到web開發中，就是需要根據不同的DPR縮放網頁內容，計算公式爲：
圖片縮放尺寸 = 圖片邏輯像素 x DPR
具體以iPhone6爲例，其屏幕寬度的物理像素共750個，邏輯像素是375px，所以DPR = 750 / 375 = 2，爲了適配iPhone6，應該使用2倍大小的圖片進行展示。