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

隨著iPhone 5扯罐、iPhone 6扛门、iPhone 6 Plus沐祷、iPhone X等機型的發(fā)布,iPhone也進入了一個多屏?xí)r代攒岛。不同的屏幕尺寸給我們帶來了很大的困擾赖临。今天,我們來看看iPhone的適配灾锯。

屏幕尺寸

機身尺寸

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

iPhone 8機身尺寸

機身尺寸和APP設(shè)計無關(guān),這個尺寸不常用顺饮。

屏幕尺寸

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

iPhone 屏幕尺寸

一般情況下,我們說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)過如下步驟進行最終顯示出來:

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

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

  3. 進行縮放采樣
    對渲染進行縮放采樣瘾敢,計算實際顯示的畫布∧蛘猓縮小的倍數(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)篇)》

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市溉躲,隨后出現(xiàn)的幾起案子榜田,更是在濱河造成了極大的恐慌,老刑警劉巖锻梳,帶你破解...
    沈念sama閱讀 207,248評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件箭券,死亡現(xiàn)場離奇詭異,居然都是意外死亡疑枯,警方通過查閱死者的電腦和手機辩块,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評論 2 381
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來神汹,“玉大人庆捺,你說我怎么就攤上這事∑ㄎ海” “怎么了滔以?”我有些...
    開封第一講書人閱讀 153,443評論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長氓拼。 經(jīng)常有香客問我你画,道長,這世上最難降的妖魔是什么桃漾? 我笑而不...
    開封第一講書人閱讀 55,475評論 1 279
  • 正文 為了忘掉前任坏匪,我火速辦了婚禮,結(jié)果婚禮上撬统,老公的妹妹穿的比我還像新娘适滓。我一直安慰自己,他們只是感情好恋追,可當(dāng)我...
    茶點故事閱讀 64,458評論 5 374
  • 文/花漫 我一把揭開白布凭迹。 她就那樣靜靜地躺著罚屋,像睡著了一般。 火紅的嫁衣襯著肌膚如雪嗅绸。 梳的紋絲不亂的頭發(fā)上脾猛,一...
    開封第一講書人閱讀 49,185評論 1 284
  • 那天,我揣著相機與錄音鱼鸠,去河邊找鬼猛拴。 笑死,一個胖子當(dāng)著我的面吹牛蚀狰,可吹牛的內(nèi)容都是我干的愉昆。 我是一名探鬼主播,決...
    沈念sama閱讀 38,451評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼造锅,長吁一口氣:“原來是場噩夢啊……” “哼撼唾!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起哥蔚,我...
    開封第一講書人閱讀 37,112評論 0 261
  • 序言:老撾萬榮一對情侶失蹤倒谷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后糙箍,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體渤愁,經(jīng)...
    沈念sama閱讀 43,609評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,083評論 2 325
  • 正文 我和宋清朗相戀三年深夯,在試婚紗的時候發(fā)現(xiàn)自己被綠了抖格。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,163評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡咕晋,死狀恐怖雹拄,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情掌呜,我是刑警寧澤滓玖,帶...
    沈念sama閱讀 33,803評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站质蕉,受9級特大地震影響势篡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜模暗,卻給世界環(huán)境...
    茶點故事閱讀 39,357評論 3 307
  • 文/蒙蒙 一禁悠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧兑宇,春花似錦碍侦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,357評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽比规。三九已至,卻和暖如春拦英,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背测秸。 一陣腳步聲響...
    開封第一講書人閱讀 31,590評論 1 261
  • 我被黑心中介騙來泰國打工疤估, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人霎冯。 一個月前我還...
    沈念sama閱讀 45,636評論 2 355
  • 正文 我出身青樓铃拇,卻偏偏與公主長得像,于是被迫代替她去往敵國和親沈撞。 傳聞我的和親對象是個殘疾皇子慷荔,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,925評論 2 344

推薦閱讀更多精彩內(nèi)容