iPhone屏幕分辨率和適配規則(基礎篇)

隨著iPhone 5、iPhone 6、iPhone 6 Plus、iPhone X等機型的發布,iPhone也進入了一個多屏時代。不同的屏幕尺寸給我們帶來了很大的困擾。今天,我們來看看iPhone的適配。

屏幕尺寸

機身尺寸

機身尺寸是指手機機身的尺寸。

iPhone 8機身尺寸

機身尺寸和APP設計無關,這個尺寸不常用。

屏幕尺寸

屏幕尺寸是指屏幕的對角線長度。

iPhone 屏幕尺寸

一般情況下,我們說iPhone 8的屏幕是4.7寸屏,就是指iPhone 8的屏幕對角線為4.7英寸。

單位

屏幕的單位是以英寸為單位。換算關系如下:

1 inch = 2.54cm = 25.4mm 

分辨率

歷代iPhone的分辨率

設備 邏輯分辨率(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
屏幕對比

屏幕寬高比

設備 物理分辨率(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進行了加長處理。中間的各個版本的比例是一致的。

因為iPhone的屏幕尺寸數值比較奇怪,都不是整數,所以只能取一個近似值。事實上,在像素級的差異上,肉眼是很難分清楚細微差異的。

邏輯分辨率和物理分辨率

邏輯分辨率以point(pt)為單位,物理分辨率以pixel(px)為單位。

區分邏輯分別率和物理分辨率是因為在早期iPhone 3GS之前,iOS繪制圖形以point為單位。在這個時期point和pixel嚴格對應在一起。在iPhone 3GS上:

1 pt = 1 px

到了iPhone 4開始,蘋果引入了Retina屏幕。在一定物理單位內可以顯示2倍的像素。iPhone 4的屏幕物理尺寸還是3.5寸,分辨率為640 × 960,提升了4倍。也就是說,原先的1 point可以容納4個pixel。

到了iPhone 4,邏輯分辨率和物理分辨率的關系就成了:

1 pt = 2 px

縮放因子(scale)

因為邏輯分辨率和物理分辨率存在著一定的比例關系,這種比例的關系稱為縮放因子。其對應關系為:

1 pt = scale * px

在iPhone 3GS上,縮放因子為1(以“@1x”來表示)。在iPhone 4上,縮放因子為2(以“@2x”來表示)。

奇葩的iPhone 6屏幕

iPhone 6有iPhone 6和iPhone Plus兩個屏幕尺寸。其中iPhone 6 Plus的屏幕均為5.5寸屏幕。其標明縮放因子為@3x,我們通過縮放因子計算,其分辨率應該為1242 × 2208。但是,實際上iPhone 6 Plus的像素為1080 × 1920。嚴格來說,iPhone 6 Plus的縮放因子應該為:

scale = 1080 px / 414 pt ≈ @ 2.6x

實際上,iPhone 6 Plus上做了特殊的縮放處理。假設我們畫一條100pt的線。經過如下步驟進行最終顯示出來:

  1. 以邏輯點描述
    開始我們以點的方式描述直線所在的起始位置。100pt的直線。

  2. 渲染成像素點
    通過縮放因子@3x,將點渲染成邏輯畫布。100pt被渲染成了300px。

  3. 進行縮放采樣
    對渲染進行縮放采樣,計算實際顯示的畫布。縮小的倍數為1.15(@3x/@2.6x)。300px被縮小成了260px。

目前iPhone 6/7/8 Plus均同樣處理。用@3x這樣的縮放因子可能是為了編程的時候更容易。有興趣的可以看一下這篇文章《奇葩的iPhone 6 屏幕》

像素密度PPI

像素密度PPI(Pixel Per Inch)是指每英寸上容納的像素數量。

計算PPI,可以簡單用勾股定理計算出對線上出現的像素,再除以對角線上長度:

將iPhone 4屏幕數據代入公式:

PPI對顯示的影響

我們知道,手機的屏幕是以像素的方式一個一個呈現出來的。PPI值越高,意味著有更細膩的畫面。

較低PPI的屏幕看起來有顆粒感。但是當PPI值到達一定程度后,再繼續提升肉眼就分別不出來了。這就是蘋果提出的Retina顯示屏的概念。在一定的距離內,手機顯示屏在200PPI以上時,肉眼就分辨不出單個像素點了。

注意,這里有兩個限制條件:“在一定的距離內”、“在手機顯示屏上”。有興趣的可以詳細了解,PPI值對我們適配影響不大,這里不展開。

好了,關于屏幕分辨率的基礎概念就講到這里。下一篇《屏幕分辨率和適配規則-iPhone篇(規則篇)》再講講適配的規則。


《iPhone屏幕分辨率和適配規則(基礎篇)》
《iPhone屏幕分辨率和適配規則(規則篇)》
《iPhone屏幕分辨率和適配規則(實現篇)》

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容