隨著iPhone 5、iPhone 6、iPhone 6 Plus、iPhone X等機(jī)型的發(fā)布，iPhone也進(jìn)入了一個(gè)多屏?xí)r代。不同的屏幕尺寸給我們帶來(lái)了很大的困擾。今天，我們來(lái)看看iPhone的適配。
屏幕尺寸
機(jī)身尺寸
機(jī)身尺寸是指手機(jī)機(jī)身的尺寸。
機(jī)身尺寸和APP設(shè)計(jì)無(wú)關(guān)，這個(gè)尺寸不常用。
屏幕尺寸
屏幕尺寸是指屏幕的對(duì)角線長(zhǎng)度。
一般情況下，我們說(shuō)iPhone 8的屏幕是4.7寸屏，就是指iPhone 8的屏幕對(duì)角線為4.7英寸。
單位
屏幕的單位是以英寸為單位。換算關(guān)系如下：
1 inch = 2.54cm = 25.4mm
分辨率
歷代iPhone的分辨率
| 設(shè)備 | 邏輯分辨率(point) | 物理分辨率(pixel) | 屏幕尺寸 | 縮放因子 | PPI |
|---|---|---|---|---|---|
| iPhone 2G | 320 × 480 | 320 × 480 | 3.5寸 | @1x | 163 |
| iPhone 3 | 320 × 480 | 320 × 480 | 3.5寸 | @1x | 163 |
| iPhone 3GS | 320 × 480 | 320 × 480 | 3.5寸 | @1x | 163 |
| iPhone 4 | 320 × 480 | 640 × 960 | 3.5寸 | @2x | 326 |
| iPhone 4S | 320 × 480 | 640 × 960 | 3.5寸 | @2x | 326 |
| iPhone 5 | 320 × 568 | 640 × 1136 | 4.0寸 | @2x | 326 |
| iPhone 5S/5C | 320 × 568 | 640 × 1136 | 4.0寸 | @2x | 326 |
| iPhone 6 | 375 × 667 | 750 × 1334 | 4.7寸 | @2x | 326 |
| iPhone 6 Plus | 414 × 736 | 1080 × 1920 | 5.5寸 | @3x | 401 |
| iPhone 6S | 375 × 667 | 750 × 1334 | 4.7寸 | @2x | 326 |
| iPhone 6S Plus | 414 × 736 | 1080 × 1920 | 5.5寸 | @3x | 401 |
| iPhone SE | 320 × 568 | 640 × 1136 | 4.0寸 | @2x | 326 |
| iPhone 7 | 375 × 667 | 750 × 1334 | 4.7寸 | @2x | 326 |
| iPhone 7 Plus | 414 × 736 | 1080 × 1920 | 5.5寸 | @3x | 401 |
| iPhone 8 | 375 × 667 | 750 × 1334 | 4.7寸 | @2x | 326 |
| iPhone 8 Plus | 414 × 736 | 1080 × 1920 | 5.5寸 | @3x | 401 |
| iPhone X | 375 × 812 | 1125 × 2436 | 5.8寸 | @3x | 458 |
屏幕寬高比
| 設(shè)備 | 物理分辨率(pixel) | 寬高比(近似) | 比例（近似） |
|---|---|---|---|
| iPhone 2G/3/3GS | 320 × 480 | 1.50 | 2:3 |
| iPhone 4/4S | 640 × 960 | 1.50 | 2:3 |
| iPhone 5/5S/5C/SE | 640 × 1136 | 1.77 | 9:16 |
| iPhone 6/6S/7/8 | 750 × 1334 | 1.77 | 9:16 |
| iPhone 6/6S/7/8 Plus | 1080 × 1920 | 1.77 | 9:16 |
| iPhone X | 1125 × 2436 | 2.16 | 9:20 |
從比例可以看出，歷代iPhone中，在iPhone 5和iPhone X進(jìn)行了加長(zhǎng)處理。中間的各個(gè)版本的比例是一致的。
因?yàn)閕Phone的屏幕尺寸數(shù)值比較奇怪，都不是整數(shù)，所以只能取一個(gè)近似值。事實(shí)上，在像素級(jí)的差異上，肉眼是很難分清楚細(xì)微差異的。
邏輯分辨率和物理分辨率
邏輯分辨率以point（pt）為單位，物理分辨率以pixel（px）為單位。
區(qū)分邏輯分別率和物理分辨率是因?yàn)樵谠缙趇Phone 3GS之前，iOS繪制圖形以point為單位。在這個(gè)時(shí)期point和pixel嚴(yán)格對(duì)應(yīng)在一起。在iPhone 3GS上：
1 pt = 1 px
到了iPhone 4開始，蘋果引入了Retina屏幕。在一定物理單位內(nèi)可以顯示2倍的像素。iPhone 4的屏幕物理尺寸還是3.5寸，分辨率為640 × 960，提升了4倍。也就是說(shuō)，原先的1 point可以容納4個(gè)pixel。
到了iPhone 4，邏輯分辨率和物理分辨率的關(guān)系就成了：
1 pt = 2 px
縮放因子（scale）
因?yàn)檫壿嫹直媛屎臀锢矸直媛蚀嬖谥欢ǖ谋壤P(guān)系，這種比例的關(guān)系稱為縮放因子。其對(duì)應(yīng)關(guān)系為：
1 pt = scale * px
在iPhone 3GS上，縮放因子為1（以“@1x”來(lái)表示）。在iPhone 4上，縮放因子為2（以“@2x”來(lái)表示）。
奇葩的iPhone 6屏幕
iPhone 6有iPhone 6和iPhone Plus兩個(gè)屏幕尺寸。其中iPhone 6 Plus的屏幕均為5.5寸屏幕。其標(biāo)明縮放因子為@3x，我們通過(guò)縮放因子計(jì)算，其分辨率應(yīng)該為1242 × 2208。但是，實(shí)際上iPhone 6 Plus的像素為1080 × 1920。嚴(yán)格來(lái)說(shuō)，iPhone 6 Plus的縮放因子應(yīng)該為：
scale = 1080 px / 414 pt ≈ @ 2.6x
實(shí)際上，iPhone 6 Plus上做了特殊的縮放處理。假設(shè)我們畫一條100pt的線。經(jīng)過(guò)如下步驟進(jìn)行最終顯示出來(lái)：
以邏輯點(diǎn)描述
開始我們以點(diǎn)的方式描述直線所在的起始位置。100pt的直線。渲染成像素點(diǎn)
通過(guò)縮放因子@3x，將點(diǎn)渲染成邏輯畫布。100pt被渲染成了300px。進(jìn)行縮放采樣
對(duì)渲染進(jìn)行縮放采樣，計(jì)算實(shí)際顯示的畫布。縮小的倍數(shù)為1.15（@3x/@2.6x）。300px被縮小成了260px。
目前iPhone 6/7/8 Plus均同樣處理。用@3x這樣的縮放因子可能是為了編程的時(shí)候更容易。有興趣的可以看一下這篇文章《奇葩的iPhone 6 屏幕》。
像素密度PPI
像素密度PPI(Pixel Per Inch)是指每英寸上容納的像素?cái)?shù)量。
計(jì)算PPI，可以簡(jiǎn)單用勾股定理計(jì)算出對(duì)線上出現(xiàn)的像素，再除以對(duì)角線上長(zhǎng)度：
將iPhone 4屏幕數(shù)據(jù)代入公式：
PPI對(duì)顯示的影響
我們知道，手機(jī)的屏幕是以像素的方式一個(gè)一個(gè)呈現(xiàn)出來(lái)的。PPI值越高，意味著有更細(xì)膩的畫面。
較低PPI的屏幕看起來(lái)有顆粒感。但是當(dāng)PPI值到達(dá)一定程度后，再繼續(xù)提升肉眼就分別不出來(lái)了。這就是蘋果提出的Retina顯示屏的概念。在一定的距離內(nèi)，手機(jī)顯示屏在200PPI以上時(shí)，肉眼就分辨不出單個(gè)像素點(diǎn)了。
注意，這里有兩個(gè)限制條件：“在一定的距離內(nèi)”、“在手機(jī)顯示屏上”。有興趣的可以詳細(xì)了解，PPI值對(duì)我們適配影響不大，這里不展開。
好了，關(guān)于屏幕分辨率的基礎(chǔ)概念就講到這里。下一篇《屏幕分辨率和適配規(guī)則-iPhone篇（規(guī)則篇）》再講講適配的規(guī)則。
《iPhone屏幕分辨率和適配規(guī)則（基礎(chǔ)篇）》
《iPhone屏幕分辨率和適配規(guī)則（規(guī)則篇）》
《iPhone屏幕分辨率和適配規(guī)則（實(shí)現(xiàn)篇）》
