dp, px, pt, dpi, ppi 傻傻分不清!

Kuang Lin
3 min readMay 21, 2019

--

首先先來介紹一下

px 就是大家最熟悉的東西!我家的螢幕是 1920x1080,這裡講的就是 ”像素”。

ppi, dpi 在手機世界基本上是相等的

他們都表示 “螢幕密度

ppi = px / inch (都是對角線)

至於常用在 Android 裡的 dp,與 iOS 使用的 pt(*註一)又是什麼呢?

首先在上數學課之前要讓大家有個最正確的第一印象,

dp, pt 都是 長度單位

也就是他們跟 公分、英寸是同等級的東西!你可以把他們想成絕對長度,不過還是有很多例外狀況。

但在講例外之前,我們還是先來說說常規吧!

dp = px/dpi * 160 (dpi = ppi)

pt = px/dpi * 163 (dpi = ppi)

dp = px/(px/inch) * 160

dp = inch * 160

pt = inch * 163

看,沒唬爛你吧,

1 dp 就是 1/160倍的英吋

所以下次你想破頭到底 dp 是什麼意思,或是到底多長的時候

你就記得,不管在哪一支手機上,拿出一支有英吋的尺,量出 0.1 英吋的長度,你就可以得到完美的 16dp !

現在來說說例外吧

For Android,

因為 Android 的系統可以從系統設定去調整螢幕顯示大小。

這時候我們常常就會踩到一個坑

dp 的數值變了!!

這就獵奇了, dp 的定義是 px/dpi * 160

而 dpi (螢幕的解析度) 是由解析度除以實際尺寸得到的結果。但是螢幕解析度是在出廠的時候就做好的, 1920x1080 怎麼用軟體調整也不會改變,更別說是螢幕尺寸。所以 dpi 當然不會變

但這樣為什麼 dp 會改變啊!!!???

而我們做個實驗,真的從

getResources().getDisplayMetrics().densityDpi 來拿 dpi。

還真的給我變了!!

所以我們知道當我們從系統設定調整了螢幕大小,

Android OS 會直接把整隻手機模擬成 低解析度的手機

這樣會造成在一樣的螢幕尺寸下, dpi 變低(註二)

這就是為什麼我們用直尺量螢幕的時候,有時候並不一定等於 dp,因為常常老花眼要調螢幕啊啊啊啊(誤

For iOS

iOS 的 pt 做法又更偷懶了

其實 iOS 的 pt 很簡單就是 px 除以 1, 2, 3 倍而已。所以…

・在 iphone 4 上面, pt = px

163< dpi ≤ 326 的手機(ex. iPhone5) pt = px/2

dpi > 326 pt = px/3

這樣一來,基本上在 dpi = 163(iPhone4), 326(iPhone6s), 489(尚未推出) 的機器上可以得到完美的丈量 (1/163 英吋) ,就是 163 的整數倍啦!

但是其他 dpi 如 iPhone6+(401), iPad Pro(264) 等等的機器,就會被迫被提到下一個階級,造成他們的元件比應該要有的長度還要小( 1dp < 1/163英吋)

結論:

大多情況下,

dp = 1/160 inch

pt = 1/ 163 inch

dp 例外: 從系統設定 -> 調整螢幕大小

pt 例外:iphone plus 系列, iPad Pro 全系列,super OLED 全系列(註三)

以上,如有疏漏還請大力鞭下去。謝謝

註一:UI元件中的 bound 所得出來的值,或是 storyboard 裡面所有數字的單位都是 pt。

註二:dpi = px/inchpx下降,dpi跟著下降

註三:super OLED 包含 iPhoneX, iPhoneXs, 但不包含 iPhoneXR

--

--