網頁和行動裝置介面設計的尺寸單位(二)
理解不同尺寸單位 pt、px、dpi 之間的定義差別，實際應用的方式以及在 CSS 上渲染的影響。
iOS App 開發用單位 pt (point)
在介紹這個單位之前，先說個小歷史，起初的 iphone 螢幕解析度為320x480，自從 iphone 4 出現之後，伴隨著視網膜 (Retina) 技術，在不改變螢幕解析度的情況下，將原本的 dpi 變成 2 倍，也就是單位英吋下能放入更多的像素點，如下圖所示：
後面甚至有 3 倍，如圖
這個時候，身為 app 的開發者就麻煩了，透過物理像素 (device pixel) 為單位畫出來的介面元件，在不同設備下會有不同的大小，也就是說，如果螢幕大小一樣，同一個元件放在像素密度為 2 倍的螢幕上，看起來會變成原本大小的 1/2。
所以為了解決這樣的問題，在 ios 開發上定義了一個單位： pt (point)，這個單位是以起源的設備 163 dpi 為基準去定義的。
1 ios point = 1/163 inch
這樣子的單位，在定義上是一個設備獨立像素 (device-independent pixel) ，意思是說，這是一個物理上的的測量單位，提供給電子設備的座標系統一個抽象的像素點，作為測量的依據，再透過換算成真實的物理像素點 (device pixel) ，所以它並非真的物理像素，在後面會介紹的 Android 及網頁上都有這樣子的單位可以使用。
這邊要特別注意，因為 ios pt 是從 inch 而來，所以是物理上的絕對單位。這樣一來，當後面新的裝置有 Retina 設計時，使用 pt 這個新單位，就可以在不同設備上有一致的實際大小。那現在的 ios pt 和前面的像素點 px 彼此關係呢？就需要看情況了：
像素密度為 163 dpi，1x 也就是 1 倍的情況下，1pt = 1px，意思是一個 ios pt 的大小裡面可以放入一個物理像素點。
像素密度為 326 dpi，2x 也就是 2 倍的情況下，1pt = 4px ，意思是一個 ios pt 的大小裡面可以放入四個物理像素點。
像素密度為 401 dpi，3x 也就是 3 倍的情況下，這裡的情況就不太一樣了，你會發現，401 dpi 並不是 163 dpi 的 3 倍，但這裡還是視為三倍，1pt = 9px，其原因是渲染解析度與實際解析度不同，中間經過降低採樣 (downsample) 的步驟，這裡有興趣的可以繼續看這篇文章研究下去：http://www.idownloadblog.com/2014/11/20/iphone-6-downsampling-explained/
總之，利用 ios pt 作為在 ios App 開發時的溝通單位，對於設計人員及工程人員有好處，不管是否為 Retina 的螢幕，都可以有一個相同大小的單位作為溝通的依據。
Android 開發用單位 dp
在 Android 開發上也有類似的單位，也就是 dp，它也是一個設備獨立像素 (device-independent pixels) 的抽象像素點，其原理與前面提到的 ios pt 類似，不一樣的是，在 Android dp 是由 160 dpi 為基準。
1 dp = 1/160 inch
在 Android 對於螢幕密度所做的分類當中，160 dpi 是屬於 MDPI ，意思是中等的像素密度（如下圖），你可以看到其他像素密度等級的螢幕，你也可以看出是多少倍數的像素密度關係，所以在相同 dp 數的情況下，不同的像素密度所能放入的像素點就會不同。
在這裡我們利用邊長的關係作為範例，原理與前面的 Retina 相同，原本為 32x32 dp ，在不同倍率下的 px 是不同的，如下圖所示：
Android 開發用字體單位 sp
在 Android app 開發中，官方文件建議在字級設定大小時使用 sp 為單位，sp 與 dp 都是屬於 device-independent pixel，唯一的差別就是，sp 作為單位會依照使用者在 Android 裝置中字定義的字型大小為根據，因為在 Andriod 平台中使用者可以任意的設定字體大小，所以建議開發上使用 sp 做 app 字級單位，在排版上就利用 dp 當成計算單位。
對於製作 App 的單位總結
在 App 輸出圖片當中，一般透過物理上的像素點 (device pixel) 這個抽象單位所製作出來的圖片，並沒有辦法適用在所有像素密度不同的設備上，所以在實務上，製作 App 的介面設計師必須要將同樣一張圖用不同的像素大小輸出，也就是 1x 、 2x 等不同解析度的圖，這樣一來，在工程上才能夠將每一種設備放上適當解析度的圖片，讓圖片在不同的畫面上看起來還是有固定的比例。在設計上我個人也會以 1x 的尺寸去做設計，如果今天是以 2x 的尺寸來設計，今天要出 3x 尺寸的圖片時就要乘以 1.5 來出圖，很有可能出現小數點的狀況，而使用 1x 思考能避免這樣的風險，不過這件事情還是以個人習慣以及當時設計的裝置尺寸為主，最後還是與工程上溝通的搭配，只要能清楚這些觀念就能決定出更有效的設計方式。
在下一篇文章將提到網頁單位，你將會發現與 App 開發單位會有相似的地方，但卻又不完全相同。繼續前往
網頁和行動裝置介面設計的尺寸單位(三)
參考資料
Mobile design 101: pixels, points and resolutions
https://webplatform.github.io/docs/tutorials/understanding-css-units/
