移動開發需要知道的像素知識『多圖』

07-23

像素（Pixel）對於WEB開發者來說很是熟悉，在PC互聯網時代沒少與其打交道。進入移動互聯網之後，隨著移動設備屏幕的解析度越來越高，衍生了一些關於屏幕和像素的一些新概念，比如DPI，DP，PT，Retina，4K等等，本文對這些概念做一個簡單的介紹。

DPI與PPI

DPI（Dots Per Inch）是印刷行業中用來度量空間點密度用的，這個值是印表機每英寸可以噴的墨汁點數。計算機顯示設備從印表機中借鑒了DPI的概念，由於計算機顯示設備中的原子單位不是墨汁點而是像素，所以就創造了PPI（Pixels Per Inch），這個值是屏幕每英寸的像素數量，即像素密度（Screen density）。由於各種原因，目前PPI(主要是iOS)和DPI(比如在Android中)都會用在計算機顯示設備的參數描述中，不過二者的意思是一樣的，都是代表像素密度。

高PPI屏幕顯示的元素會比較精細（看起來會比較小），低PPI屏幕顯示的元素相對來說就比粗糙（看起來會比較大），我們通過一幅圖來看看在不同PPI下元素顯示的區別：

HD與4K

現在移動設備、智能電視宣傳最多的兩個關鍵詞估計就是HD、4K，這二者都是用來描述顯示設備解析度的標準，到底二者之間有什麼區別？

HD(High-Definition)的解析度要高於1280x720px或者720p。

Full HD的解析度要高於1920x1080px，目前是主流電視以及高端手機（比如Galaxy SIV, HTC one, Sony Xperia Z, Nexus5等）採用的是這個解析度。

4K（也叫做Quad HD或者Ultra HD）的解析度從3840x2160起步，主要是現在高端電視的解析度；其還有一個更高的4096x2160的標準，主要用於電影放映機或者專業相機。

RetinaRetina display即視網膜屏幕，是蘋果發布iPhone 4時候提出的，之所以叫做視網膜屏幕，是因為屏幕的PPI太高，人的視網膜無法分辨出屏幕上的像素點。iPhone 4/S的PPI為326，是iPhone 3G/S的兩倍，如下圖：

由於屏幕在寬和高的像素數量提高了整整一倍，所以之前非Retina屏幕上的一個像素渲染的內容在Retina屏幕上會用4個像素去渲染：1x1px(non Retina) = 2x2px(Retina)，這樣元素的內容就會變得精細，比如：

注意，Retina display是蘋果註冊的命名方式，其他廠商只能使用HI-DPI或者其他的命名方式，不過意思都是一樣的，就是屏幕的PPI非常高。

DP/PT/SP隨著移動設備屏幕PPI的不斷提高，對於開發者來說以前用物理像素(Physical Pixel)來度量顯示元素的方法已經不奏效了。為了解決這個問題，兩大平台都提出了抽象像素的概念：iOS叫做PT（Point，顯示點），Android中叫做DP/DiP（Device independent Pixel，設備無關像素），如果沒有特殊說明，以下統一用DP來進行描述。舉個例子，44x44dp的元素在非Retina屏幕中等於44x44px，在Retina屏幕中等於88x88px（變為4倍）。