移動開發(fā)者必須了解的像素知識
像素(Pixel)對于WEB開發(fā)者來說很是熟悉,在PC互聯(lián)網(wǎng)時代沒少與其打交道。進入移動互聯(lián)網(wǎng)之后,隨著移動設備屏幕的解析度越來越高,衍生了一些關于屏幕和像素的一些新概念,比如DPI,DP,PT,Retina,4K等等,本文對這些概念做一個簡單的介紹。
DPI與PPI
DPI(Dots Per Inch)是印刷行業(yè)中用來度量空間點密度用的,這個值是打印機每英寸可以噴的墨汁點數(shù)。計算機顯示設備從打印機中借鑒了DPI的概念,由于計算機顯示設備中的原子單位不是墨汁點而是像素,所以就創(chuàng)造了PPI(Pixels Per Inch),這個值是屏幕每英寸的像素數(shù)量,即像素密度(Screen density)。由于各種原因,目前PPI(主要是iOS)和DPI(比如在Android中)都會用在計算機顯示設備的參數(shù)描述中,不過二者的意思是一樣的,都是代表像素密度。
高PPI屏幕顯示的元素會比較精細(看起來會比較?。?,低PPI屏幕顯示的元素相對來說就比粗糙(看起來會比較大),我們通過一幅圖來看看在不同PPI下元素顯示的區(qū)別:
HD與4K
現(xiàn)在移動設備、智能電視宣傳最多的兩個關鍵詞估計就是HD、4K,這二者都是用來描述顯示設備分辨率的標準,到底二者之間有什么區(qū)別?
HD(High-Definition)的分辨率要高于1280x720px或者720p。
Full HD的分辨率要高于1920x1080px,目前是主流電視以及高端手機(比如Galaxy SIV, HTC one, Sony Xperia Z, Nexus5等)采用的是這個分辨率。
4K(也叫做Quad HD或者Ultra HD)的分辨率從3840x2160起步,主要是現(xiàn)在高端電視的分辨率;其還有一個更高的4096x2160的標準,主要用于電影放映機或者專業(yè)相機。
Retina
Retina display即視網(wǎng)膜屏幕,是蘋果發(fā)布iPhone 4時候提出的,之所以叫做視網(wǎng)膜屏幕,是因為屏幕的PPI太高,人的視網(wǎng)膜無法分辨出屏幕上的像素點。iPhone 4/S的PPI為326,是iPhone 3G/S的兩倍,如下圖:
由于屏幕在寬和高的像素數(shù)量提高了整整一倍,所以之前非Retina屏幕上的一個像素渲染的內容在Retina屏幕上會用4個像素去渲染:1x1px(non Retina) = 2x2px(Retina)
,這樣元素的內容就會變得精細,比如:
注意,Retina display
是蘋果注冊的命名方式,其他廠商只能使用HI-DPI
或者其他的命名方式,不過意思都是一樣的,就是屏幕的PPI非常高。
DP/PT/SP
隨著移動設備屏幕PPI的不斷提高,對于開發(fā)者來說以前用物理像素(Physical Pixel)來度量顯示元素的方法已經(jīng)不奏效了。為了解決這個問題,兩大平臺都提出了抽象像素的概念:iOS叫做PT(Point,顯示點),Android中叫做DP/DiP(Device independent Pixel,設備無關像素),如果沒有特殊說明,以下統(tǒng)一用DP來進行描述。
舉個例子,44x44dp的元素在非Retina屏幕中等于44x44px,在Retina屏幕中等于88x88px(變?yōu)?倍)。
SP(Scale-independent pixel)是縮放無關的像素,與DP和PT一樣都是抽象像素,只不過用于描述字體的大小。
iOS中處理PPI
iOS中處理不同PPI顯示的方法很簡單:首先規(guī)定在多高的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屏幕顯示的資源是不同的,其規(guī)則是: name.png
為非Retina資源,name@2x.png
為Retina資源,所以對于設計人員來說,在你設計的時候需要考慮到Retina屏幕和非Retina屏幕,看下面這個例子:
Android中處理PPI
由于Android系統(tǒng)是開放的系統(tǒng),要適配的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會根據(jù)dpi自動選擇資源,目錄規(guī)則如下:
- 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 | 可以轉載, 但必須以超鏈接形式標明文章原始出處和作者信息及版權聲明
網(wǎng)址: http://weizhifeng.net/you-should-know-about-dpi.html