iOS開發：解析度像素你知多少

iPhone螢幕尺寸和解析度方面的一些小姿勢 20160303

iPhone裝置現在有多種解析度，如下表所列，

裝置	螢幕尺寸	解析度（pt）	Reader	解析度（px）	渲染後	PPI（DPI）
iPhone 3GS	3.5寸	320 x 480	@1x	320 x 480	空	163
iPhone 4/4S	3.5寸	320 x 480	@2x	640 x 960	空	326
iPhone 5/5S/5C	4.0寸	320 x 568	@2x	640 x 1136	空	326
iPhone 6/6S	4.7寸	375 x 667	@2x	750 x 1334	空	326
iPhone 6/6S Plus	5.5寸	414 x 736	@3x	1242 x 2208	1080 x 1920	401

剛開始看見上面的表格時候，我有三個疑問，

DPI和PPI是什麼意思。

pt和px是有什麼不同。

iPhone 6/6s Plus解析度是1242 x 2208，為何渲染後解析度變為1080 x 1920。

針對以上三個問題，我遵循內事不決問百度，外事布局問Google的原則，在網上找了一些答案，以下是簡單的解答。 1. DPI和PPI是什麼鬼。

DPI（Dots Per Inch）最初用于衡量列印無上每英寸的點數密度，就是說你的印表機可以在一英寸內打多少個點。DPI值越小，圖片越不驚喜。

當DPI的概念用在電腦螢幕上時候，就應該稱之為PPI（Pixels Per Inch）。同理：PPI就是電腦螢幕上每英寸可以顯示的像素點的數量。

Windows系統預設PPI是96，Mac OS系統預設PPI是72.一般費視網膜螢幕的案頭電腦的PPI在72到120之間，使用72到120之間的PPI進行設計基本可以保證你的作品在大多數情況下看起來都差不多。

舉個栗子來說：27寸Mac的PPI是109，也就是每英寸有109個像素。顯示器寬度（含邊框）為25.7英寸，螢幕純寬度差不多是23.5英寸，所以23.5 x 109 = 2560，由此可見螢幕的解析度為2560 x 1440px。

視網膜螢幕與PPI：視網膜螢幕是在iPhone4發布時進入福士視野的，叫視網膜是因為螢幕的PPI高到人的肉眼無法看到像素點。從技術上來說就是他們在物理尺寸與上一代相同的螢幕上塞了2倍的像素，如下圖所示，

這種情況下，不蘇傲笑元素的大小，相同尺寸螢幕上的元素精度提高了2倍。原來一個像素的空間現在有4個像素，像素是原來的4倍。

iPhone 4採用Retina顯示屏，在物理尺寸不變的情況下，像素成倍增加，達到了640 x 960像素。這樣就出現了一個問題，怎樣讓原有的App運行在新的手機上面。為了運行之前的App，蘋果公司引入了一個新的概念point（點），點這個概念在iOS開發中十分重要，而開發人員很少關注。iPhone 4螢幕尺寸繼續保持320 x 480，不過單位並非是像素，而是點。

在iPhone 3GS中，一個點等於一個像素，也就是說點跟像素可以直接互換；在iPhone 4中，一個點等於兩個像素；在iPhone 6 Plus中，一個點等於3個像素。

iPhone 4和iPhone 3GS的螢幕尺寸實際上是一樣的，都是3.5英寸。同樣一個點，實際上看起來是一樣的，只是iPhone 4在單位英寸上像素更多，看起來更加細膩。 2. pt和px有什麼不同。

pt（Point）代表點，px（Piexl）表示像素，這是兩個看起來很像、卻完全不一樣的單位，在某些場合它們是1：1的，在很多時候卻常常被搞混，或是製作過程根本沒有分清楚、導致結果不準確。在繪圖軟體裡面可以看到基本單位設定裡面就有這兩個選擇，

px，即是pixel，表示像素。是螢幕上所顯示的最小單位，在解析度高的螢幕上，一個像素可能會達到肉眼無法識別的大小，

pt，即是point，是一個標準的長度單位，定義上1pt = 1/72英寸，英雌他跟我們所熟悉的公分、公尺一樣，可以明確的指出1pt的長度是多少，

pt也是常見的標識文字尺寸的單位，在繪圖以及文書軟體等幾乎都是使用pt作為字型尺規的單位，故一般稱呼[字級]時候，通常即是指pt。

pt和px理解青睞其實並不難，在應用的時候也相當單純，在大部分的情況下適用的一個理論是：當設計的目的是用於供螢幕瀏覽，則趨向於使用px以方便掌握細節；而如果是為了做輸出列印的需求，使用pt則是較好的選擇。

在iPhone 3GS時代，解析度和點是1：1，到了iPhone 4，解析度和點是2：1的關係，而在iPhone 6 Plus裝置上，解析度和點事3:1，所以為了方便開發人員開發，iOS中統一使用點（Point）對介面元素的大小進行描述，這樣解析度的差異對於開發人員來說就不是問題了，在開發層面來說，開發人員無需進行解析度和點的單位換算，完全感覺不到點和解析度的差異。

當我們說一個iPhone裝置的解析度時候，實際上我們是用的pt（點）作為描述解析度的單位；當我們和UI討論圖片的尺寸時候，實際說的是px（像素）來作為描述圖片的單位。 3. iPhone 6/6s Plus解析度是1242 x 2208，為何渲染後解析度變為1080 x 1920。

iPhone 6 Plus除外，其他所有iPhone的PPI是一致的，都是326，用@2x素材。

但是iPhone 6 Plus的實際PPI是401，理論上蘋果應該用401 / 326 x @2x = @2.46x的素材，但是這個奇葩的臂力對於開發人員而言很難切圖，所以蘋果為了方便開發人員就採用了@3x的素材，然後再縮放到@2.46x的螢幕上，也就是縮放到2.46 / 3 = 83%，實際上蘋果選取了一個接近比例的87%。這樣算下來，物理解析度和虛擬解析度的比率是87%，也就是1080 / 0.86 = 1242，1920 / 0.87 = 2208。好處是開發人員更方便，比如準備素材時候，字型大小可以直接調整為3x的。

讓我們再來看一下不同iPhone裝置的解析度和像素的對照表，

手機	pt	px	PPI（DPI）
iPhone 4/4S/5/5S/5C/6	10	20	326
iPhone 6/6S Plus	10	30	401

對於iPhone 6 Plus之前的手機，pt和px的比例是1：2，而iPhone 6 Plus出來之後，這一比例達到了1：3，同時解析度達到了1242 x 2208（使用iPhone 6 Plus截屏，再上傳到電腦看，就是這個解析度），而iPhone 6 Plus實際解析度為1080 x 1920，解析度的比率為1.15：1。對於ppi，iPhone 6 Plus之前均為326，而之後變為401。

素材資源發生的變化@3x，在實際開發中，素材通常是UI美眉負責提供，從@2x到@3x，素材的解析度提高了1.5倍，例如一個@2x的素材大小為44x44，那麼響應的@3x大小解析度為66x66，檔案命名的方式依然沒變，$(IMG_NAME)@3x.png，命名好的檔案丟入資源檔夾內，只要代碼報紙一直，檔案名稱不變即可。