隨著iPhone 5扯罐、iPhone 6扛门、iPhone 6 Plus沐祷、iPhone X等機型的發(fā)布,iPhone也進入了一個多屏?xí)r代攒岛。不同的屏幕尺寸給我們帶來了很大的困擾赖临。今天,我們來看看iPhone的適配灾锯。
屏幕尺寸
機身尺寸
機身尺寸是指手機機身的尺寸兢榨。
機身尺寸和APP設(shè)計無關(guān),這個尺寸不常用顺饮。
屏幕尺寸
屏幕尺寸是指屏幕的對角線長度吵聪。
一般情況下,我們說iPhone 8的屏幕是4.7寸屏兼雄,就是指iPhone 8的屏幕對角線為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進行了加長處理。中間的各個版本的比例是一致的金砍。
因為iPhone的屏幕尺寸數(shù)值比較奇怪局蚀,都不是整數(shù),所以只能取一個近似值恕稠。事實上琅绅,在像素級的差異上,肉眼是很難分清楚細微差異的鹅巍。
邏輯分辨率和物理分辨率
邏輯分辨率以point(pt)為單位千扶,物理分辨率以pixel(px)為單位。
區(qū)分邏輯分別率和物理分辨率是因為在早期iPhone 3GS之前骆捧,iOS繪制圖形以point為單位澎羞。在這個時期point和pixel嚴格對應(yīng)在一起。在iPhone 3GS上:
1 pt = 1 px
到了iPhone 4開始敛苇,蘋果引入了Retina屏幕妆绞。在一定物理單位內(nèi)可以顯示2倍的像素。iPhone 4的屏幕物理尺寸還是3.5寸枫攀,分辨率為640 × 960括饶,提升了4倍。也就是說来涨,原先的1 point可以容納4個pixel图焰。
到了iPhone 4,邏輯分辨率和物理分辨率的關(guān)系就成了:
1 pt = 2 px
縮放因子(scale)
因為邏輯分辨率和物理分辨率存在著一定的比例關(guān)系蹦掐,這種比例的關(guān)系稱為縮放因子技羔。其對應(yīng)關(guān)系為:
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牺弹,我們通過縮放因子計算,其分辨率應(yīng)該為1242 × 2208时呀。但是张漂,實際上iPhone 6 Plus的像素為1080 × 1920谨娜。嚴格來說航攒,iPhone 6 Plus的縮放因子應(yīng)該為:
scale = 1080 px / 414 pt ≈ @ 2.6x
實際上,iPhone 6 Plus上做了特殊的縮放處理趴梢。假設(shè)我們畫一條100pt的線漠畜。經(jīng)過如下步驟進行最終顯示出來:
以邏輯點描述
開始我們以點的方式描述直線所在的起始位置。100pt的直線坞靶。渲染成像素點
通過縮放因子@3x憔狞,將點渲染成邏輯畫布。100pt被渲染成了300px彰阴。進行縮放采樣
對渲染進行縮放采樣瘾敢,計算實際顯示的畫布∧蛘猓縮小的倍數(shù)為1.15(@3x/@2.6x)簇抵。300px被縮小成了260px。
目前iPhone 6/7/8 Plus均同樣處理射众。用@3x這樣的縮放因子可能是為了編程的時候更容易碟摆。有興趣的可以看一下這篇文章《奇葩的iPhone 6 屏幕》。
像素密度PPI
像素密度PPI(Pixel Per Inch)是指每英寸上容納的像素數(shù)量叨橱。
計算PPI典蜕,可以簡單用勾股定理計算出對線上出現(xiàn)的像素,再除以對角線上長度:
將iPhone 4屏幕數(shù)據(jù)代入公式:
PPI對顯示的影響
我們知道罗洗,手機的屏幕是以像素的方式一個一個呈現(xiàn)出來的嘉裤。PPI值越高,意味著有更細膩的畫面栖博。
較低PPI的屏幕看起來有顆粒感。但是當(dāng)PPI值到達一定程度后厢洞,再繼續(xù)提升肉眼就分別不出來了仇让。這就是蘋果提出的Retina顯示屏的概念典奉。在一定的距離內(nèi),手機顯示屏在200PPI以上時丧叽,肉眼就分辨不出單個像素點了卫玖。
注意,這里有兩個限制條件:“在一定的距離內(nèi)”踊淳、“在手機顯示屏上”假瞬。有興趣的可以詳細了解,PPI值對我們適配影響不大迂尝,這里不展開脱茉。
好了,關(guān)于屏幕分辨率的基礎(chǔ)概念就講到這里垄开。下一篇《屏幕分辨率和適配規(guī)則-iPhone篇(規(guī)則篇)》再講講適配的規(guī)則琴许。
《iPhone屏幕分辨率和適配規(guī)則(基礎(chǔ)篇)》
《iPhone屏幕分辨率和適配規(guī)則(規(guī)則篇)》
《iPhone屏幕分辨率和適配規(guī)則(實現(xiàn)篇)》