[[124454]]

像素（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的標準，主要用于電影放映機或者專業相機。

Retina

Retina 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倍）。

SP（Scale-independent pixel）是縮放無關的像素，與DP和PT一樣都是抽象像素，只不過用于描述字體的大小。

iOS中處理PPI

iOS中處理不同PPI顯示的方法很簡單：首先規定在多高的PPI下1DP等于1px，并以這個PPI作為基準（1x multiplier），如果顯示設備的PPI是基準PPI的2倍，那么1DP等于2px（2x multiplier），其實就是簡單的小學乘法。

在iPhone系列中，3G/S為1x multiplier，其他為2x multiplier：

在iPad系列中，iPad 1代和2代為1x multiplier，其他為2x multiplier：

在iPad Mini系列中，iPad Mini一代為1x multiplier，其他為2x multiplier：

在iOS中，同一個應用在非Retina屏幕和Retina屏幕顯示的資源是不同的，其規則是： name.png為非Retina資源，name@2x.png為Retina資源，所以對于設計人員來說，在你設計的時候需要考慮到Retina屏幕和非Retina屏幕，看下面這個例子：

Android中處理PPI

由于Android系統是開放的系統，要適配的PPI非常多，所以它對PPI劃分的非常細：

• ldpi (low) ~120dpi
• mdpi (medium) ~160dpi
• hdpi (high) ~240dpi
• xhdpi (extra-high) ~320dpi
• xxhdpi (extra-extra-high) ~480dpi
• xxxhdpi (extra-extra-extra-high) ~640dpi

你需要把對應dpi的資源放到對應的目錄就可以了，Android會根據dpi自動選擇資源，目錄規則如下：

• drawable-mdpi/asset.png
• drawable-hdpi/asset.png
• drawable-xhdpi/asset.png
• ...

可以看出Android中mdpi與iOS中的1x multiplier所代表的PPI是一樣的，xhdpi與iOS的2x multiplier所代表的PPI一樣，如圖：

參考

• http://sebastien-gabriel.com/designers-guide-to-dpi/home
• http://developer.android.com/guide/practices/screens_support.html

(完)

作者: JeremyWei | 可以轉載, 但必須以超鏈接形式標明文章原始出處和作者信息及版權聲明

網址: http://weizhifeng.net/you-should-know-about-dpi.html