iOS開發：解析度畫素你知多少 - 程式前沿

DPI和PPI是什麼鬼？ 程式語言前端開發IOS開發Android開發雲端運算人工智慧伺服器搜尋資料庫軟體開發工具iOS開發：解析度畫素你知多少2018.08.07程式語言ios,ios開發下載,ios開發和,ios開發延時,kvcios開發,區塊鏈ios開發,解析度HOME程式語言iOS開發：解析度畫素你知多少Advertisement目錄1.iPhone螢幕尺寸和解析度方面的一些小姿勢201603031.0.1.1.DPI和PPI是什麼鬼？1.0.2.2.pt和px有什麼不同？1.0.3.3.iPhone6/6sPlus解析度是1242x2208，為何渲染後解析度變為1080x1920？iPhone螢幕尺寸和解析度方面的一些小姿勢20160303iPhone裝置現在有多種解析度，如下表所列，裝置螢幕尺寸解析度（pt）Reader解析度（px）渲染後PPI（DPI）iPhone3GS3.5寸320x480@1x320x480空163iPhone4/4S3.5寸320x480@2x640x960空326iPhone5/5S/5C4.0寸320x568@2x640x1136空326iPhone6/6S4.7寸375x667@2x750x1334空326iPhone6/6SPlus5.5寸414x736@3x1242x22081080x1920401剛開始看見上面的表格時候，我有三個疑問，DPI和PPI是什麼意思？pt和px是有什麼不同？iPhone6/6sPlus解析度是1242x2208，為何渲染後解析度變為1080x1920？針對以上三個問題，我遵循內事不決問百度，外事佈局問谷歌的原則，在網上找了一些答案，以下是簡單的解答。

1.DPI和PPI是什麼鬼？DPI（DotsPerInch）最初用於衡量列印無上每英寸的點數密度，就是說你的印表機可以在一英寸內打多少個點。

DPI值越小，圖片越不驚喜。

當DPI的概念用在計算機螢幕上時候，就應該稱之為PPI（PixelsPerInch）。

同理：PPI就是計算機螢幕上每英寸可以顯示的畫素點的數量。

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

舉個栗子來說：27寸Mac的PPI是109，也就是每英寸有109個畫素。

顯示器寬度（含邊框）為25.7英寸，螢幕純寬度差不多是23.5英寸，所以23.5x109=2560，由此可見螢幕的解析度為2560x1440px。

視網膜螢幕與PPI：視網膜螢幕是在iPhone4釋出時進入大眾視野的，叫視網膜是因為螢幕的PPI高到人的肉眼無法看到畫素點。

從技術上來說就是他們在物理尺寸與上一代相同的螢幕上塞了2倍的畫素，如下圖所示，這種情況下，不蘇傲笑元素的大小，相同尺寸螢幕上的元素精度提高了2倍。

原來一個畫素的空間現在有4個畫素，畫素是原來的4倍。

iPhone4採用Retina顯示屏，在物理尺寸不變的情況下，畫素成倍增加，達到了640x960畫素。

這樣就出現了一個問題，怎樣讓原有的App執行在新的手機上面？為了執行之前的App，蘋果公司引入了一個新的概念point（點），點這個概念在iOS開發中十分重要，而開發者很少關注。

iPhone4螢幕尺寸繼續保持320x480，不過單位並非是畫素，而是點。

在iPhone3GS中，一個點等於一個畫素，也就是說點跟畫素可以直接互換；在iPhone4中，一個點等於兩個畫素；在iPhone6Plus中，一個點等於3個畫素。

iPhone4和iPhone3GS的螢幕尺寸實際上是一樣的，都是3.5英寸。

同樣一個點，實際上看起來是一樣的，只是iPhone4在單位英寸上畫素更多，看起來更加細膩。

2.pt和px有什麼不同？pt（Point）代表點，px（Piexl）表示畫素，這是兩個看起來很像、卻完全不一樣的單位，在某些場合它們是1：1的，在很多時候卻常常被搞混，或是製作過程根本沒有分清楚、導致結果不準確。

在繪圖軟體裡面可以看到基本單位設定裡面就有這兩個選擇，px，即是pixel，表示畫素。

是螢幕上所顯示的最小單位，在解析度高的螢幕上，一個畫素可能會達到肉眼無法識別的大小，pt，即是point，是一個標準的長度單位，定義上1pt=1/72英寸，英雌他跟我們所熟悉的公分、公尺一樣，可以明確的指出1pt的長度是多少，pt也是常見的標識文字尺寸的單位，在繪圖以及文書軟體等幾乎都是使用pt作為字型標尺的單位，故一般稱呼[字級]時候，通常即是指pt。

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

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

當我們說一個iPhone裝置的解析度時候，實際上我們是用的pt（點）作為描述解析度的單位；當我們和UI討論圖片的尺寸時候，實際說的是px（畫素）來作為描述圖片的單位。

3.iPhone6/6sPlus解析度是1242x2208，為何渲染後解析度變為1080x1920？iPhone6Plus除外，其他所有iPhone的PPI是一致的，都是326，用@2x素材。

但是iPhone6Plus的實際PPI是401，理論上蘋果應該用401/326x@[email protected]的素材，但是這個奇葩的臂力對於開發者而言很難切圖，所以蘋果為了方便開發者就採用了@3x的素材，然後再縮放到@2.46x的螢幕上，也就是縮放到2.46/3=83%，實際上蘋果選取了一個接近比例的87%。

這樣算下來，物理解析度和虛擬解析度的比率是87%，也就是1080/0.86=1242，1920/0.87=2208。

好處是開發者更方便，比如準備素材時候，字號可以直接調整為3x的。

讓我們再來看一下不同iPhone裝置的解析度和畫素的對照表，手機ptpxPPI（DPI）iPhone4/4S/5/5S/5C/61020326iPhone6/6SPlus1030401對於iPhone6Plus之前的手機，pt和px的比例是1：2，而iPhone6Plus出來之後，這一比例達到了1：3，同時解析度達到了1242x2208（使用iPhone6Plus截圖，再上傳到電腦看，就是這個解析度），而iPhone6Plus實際解析度為1080x1920，解析度的比率為1.15：1。

對於ppi，iPhone6Plus之前均為326，而之後變為401。

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

Advertisement写评论取消回覆很抱歉，必須登入網站才能發佈留言。

近期文章Vue中容易被忽視的知識點2019.12.09if我是前端Leader，談談前端框架體系建設2019.12.09Spark入門（一）用SparkShell初嘗Spark滋味2019.12.08Spark入門（二）如何用Idea運行我們的Spark項目2019.12.08Spark入門（三）Spark經典的單詞統計2019.12.08Spark入門（四）Spark的map、flatMap、mapToPair2019.12.08Spark入門（五）Spark的reduce和reduceByKey2019.12.08Spark入門（六）Spark的combineByKey、sortBykey2019.12.08Spark入門（七）Spark的intersection、subtract、union和distinct2019.12.08Spark實戰尋找5億次訪問中，訪問次數最多的人2019.12.08AdvertisementAdvertisement