在上一篇文章《iPhone屏幕分辨率和適配規(guī)則（基礎(chǔ)篇）》中蕊苗，講了iPhone分辨率的基礎(chǔ)概念。這一篇我們講講屏幕適配沿彭。
物理像素和邏輯像素
要講屏幕適配朽砰，物理像素和邏輯像素是兩個(gè)繞不開(kāi)的概念。先來(lái)看一下為什么要有兩個(gè)像素單位喉刘。
如果使用物理像素
我們來(lái)假設(shè)一個(gè)問(wèn)題瞧柔，如果只用物理像素（pixel）來(lái)作為單位，會(huì)出現(xiàn)什么問(wèn)題睦裳。
來(lái)看一下造锅，一個(gè)100px的正方形在不同手機(jī)下的打開(kāi)的效果。
iPhone 3GS和iPhone 4的屏幕大小一樣廉邑，但是iPhone 4的像素密度是iPhone 3GS的2兩倍哥蔚。所以一樣100px的正方形，在iPhone 4上看起來(lái)像是縮小了一倍蛛蒙。在iPhone 4和iPhone 6上的顯示大小是一樣的糙箍。
如果使用邏輯像素
所幸的是，我們看到的是iPhone 3GS和iPhone 4的邏輯像素（point）是一致的牵祟。如果使用邏輯像素深夯，100pt的正方形在不同手機(jī)下打開(kāi)的效果是如何的。
好了诺苹，可以看到100pt的正方形在所有屏幕上看起來(lái)大小都一樣了咕晋。
事實(shí)上雹拄，iPhone使用的就是邏輯像素作為顯示單位的。
適配的過(guò)程
iPhone 6和iPhone 6 Plus的尺寸是比較神奇的捡需。我們以iPhone 6的例子來(lái)看看適配的過(guò)程办桨。
從UI到開(kāi)發(fā)
開(kāi)發(fā)實(shí)際使用的單位是pt。而UI給出的視覺(jué)稿是以px為單位的站辉。所以呢撞，首先需要將px轉(zhuǎn)化成pt。
在這一步饰剥，要搞清楚UI給出的視覺(jué)稿以什么分辨率作為基準(zhǔn)殊霞。如果是iPhone 6的640 × 960px，則用@2x作為縮放因子汰蓉。如果是iPhone 6 Plus的1242 × 2208px（注意绷蹲，不是1080 × 1920px），則用@3x作為縮放因子顾孽。
假設(shè)以iPhone 6作為基準(zhǔn)祝钢，需要繪制一個(gè)40px的按鈕。以@2x進(jìn)行縮放若厚，開(kāi)發(fā)以20pt進(jìn)行繪制拦英。
在實(shí)際設(shè)計(jì)中，經(jīng)常以iPhone 6作為基準(zhǔn)测秸，向下可以適配iPhone 5疤估，向上可以適配 iPhone 6 Plus。
從邏輯像素到物理像素
當(dāng)這個(gè)設(shè)計(jì)稿在iPhone 6和IPhone 6 Plus進(jìn)行渲染時(shí)霎冯，渲染后結(jié)果為铃拇。
| 設(shè)備 | 縮放因子 | 邏輯像素 | 物理像素 |
|---|---|---|---|
| iPhone 6 | @2x | 20pt | 40px |
| iPhone 6 Plus | @3x | 20pt | 60px |
明顯的，我們可以看到iPhone 6和iPhone 6 Plus相差了20px沈撞。那豈不是說(shuō)慷荔，在不同的屏幕上看到的效果不一致咯。先不急缠俺，我們接著往下看拧廊。
iPhone 6 Plus的縮放
iPhone 6 Plus的實(shí)際分辨率為1080 × 1920px，而不是1242 × 2208px晋修。嚴(yán)格來(lái)說(shuō)，iPhone 6 Plus的縮放因子為@2.6凰盔。所以墓卦，在最終顯示到屏幕上還需要經(jīng)過(guò)采樣縮放。在iPhone 6 Plus上户敬，實(shí)際顯示像素為：
60px * 1080 / 1242 ≈ 52 px
到這里落剪，iPhone 6和iPhone 6 Plus還是相差了12px睁本。
但是，眾所周知iPhone 6 Plus的PPI比iPhone 6的高忠怖。所以還需要考慮PPI的影響呢堰。
PPI的影響
iPhone 6的是326ppi，而iPhone 6 Plus為401ppi凡泣。什么意思呢枉疼？就是說(shuō)，iPhone 6 Plus每英寸的長(zhǎng)度顯示的像素比iPhone 6多鞋拟。所以骂维，在視覺(jué)效果上，同樣像素的控件贺纲，在iPhone 6 Plus看起來(lái)要更小一點(diǎn)航闺。
如果將iPhone 6 Plus的52px，等比放在iPhone 6上猴誊，在視覺(jué)上還要再進(jìn)一步的縮小潦刃。所以，iPhone 6 Plus的52px懈叹，換算成iPhone 6的視覺(jué)效果乖杠，大概為：
52px * 326 / 401 ≈ 42px
是的，這就是最終的效果项阴，在視覺(jué)上還是有2px的差距滑黔。但是，這個(gè)差距在視覺(jué)上已經(jīng)沒(méi)什么差距了环揽。
適配規(guī)則
下面來(lái)看一下iPhone適配的一些簡(jiǎn)單的規(guī)則略荡。
留黑邊
iPhone 4(S)之前，寬高比是1.5歉胶，iPhone 5之后汛兜，寬高比變成了1.77，到了iPhone X發(fā)布會(huì)通今，寬高比又進(jìn)一步拉大變成2.10粥谬。可以想象成在原來(lái)的屏幕基礎(chǔ)上長(zhǎng)了一截出來(lái)辫塌。
如果要維持頁(yè)面寬高比不變漏策，則屏幕的上下部分會(huì)出現(xiàn)一個(gè)黑邊。因?yàn)槠聊槐旧砭褪呛诘木拾保栽谝曈X(jué)上并不會(huì)出現(xiàn)特別不適的情況掺喻。
雖然這種辦法簡(jiǎn)單粗暴，但是卻是比較高效簡(jiǎn)單的辦法。事實(shí)上感耙，在新的屏幕比例發(fā)布后褂乍，很多APP就是用這種臨時(shí)方案來(lái)暫時(shí)進(jìn)行適配的。
等比縮放
iPhone 5和iPhone 6/7/8 和 iPhone 6/7/8 Plus之間雖然屏幕尺寸變大了即硼，但是逃片，其比例都是16:9。
通過(guò)彈性放大的方式將其等比的放大來(lái)適應(yīng)屏幕的變化只酥。
可以看到褥实，不同的屏幕尺寸不一樣，可是顯示的內(nèi)容卻是一致的层皱。
變大后的失真的問(wèn)題
因?yàn)閳D標(biāo)通常都是位圖性锭。所以不可以避免的，經(jīng)過(guò)拉大后圖標(biāo)會(huì)出現(xiàn)失真的問(wèn)題叫胖。
為此iPhone提供了一套解決方案草冈。為不同分辨率的設(shè)備提供不同分辨率的圖標(biāo)。iPhone 3GS~iPhoneX有著三種不同的縮放因子瓮增，根據(jù)不同的縮放因子怎棱，我們需要提供三種分辨率的圖標(biāo)：@1x/@2x/@3x。
UI以icon.@1x.png/icon.@2x.png/icon.@3x.png為命名绷跑，程序自動(dòng)根據(jù)不同的屏幕使用不同的icon圖標(biāo)拳恋。
適配基礎(chǔ)規(guī)則
大屏幕帶來(lái)了較大的顯示空間。但是砸捏，無(wú)論是留黑邊的方式谬运，還是等比縮放的方式，在屏幕加大時(shí)并不能將更多的信息呈現(xiàn)給用戶垦藏。白白浪費(fèi)了大屏幕的優(yōu)勢(shì)梆暖。
我們來(lái)看看怎么解決這個(gè)問(wèn)題。有三條比較基礎(chǔ)的規(guī)則：文字流式（fluid）掂骏，控件彈性（flexible）轰驳，圖片等比縮放（scale）。
文字流式（fluid）
屏幕變大時(shí)弟灼，保持文字大小不變级解，隨著屏幕變大，橫向拉寬文字的顯示區(qū)域田绑。
為什么要保持文字大小不變
字體不是越大越好的勤哗。通過(guò)測(cè)試，iPhone的字體大概在20px~36px時(shí)（排除某些特殊的設(shè)計(jì)）掩驱，會(huì)得到比較良好的閱讀體驗(yàn)芒划。保持字體大小在一定范圍內(nèi)豁延，就是為了保證閱讀起來(lái)比較舒服。
控件彈性（flexible）
屏幕變大時(shí)腊状，保持控件大小不變，隨著屏幕的變大苔可，橫向調(diào)整控件的相對(duì)位置缴挖。
相比于將控件固定在某個(gè)位置上，這種布局能更好地保持控件在頁(yè)面上的平衡焚辅。同時(shí)映屋，也能保證屏幕變大的時(shí)候，控件不會(huì)因?yàn)楸焕蠖д妗?/p>
圖片等比縮放（scale）
對(duì)于圖片同蜻，屏幕變大時(shí)棚点，沒(méi)辦法只拉伸橫向的，這樣會(huì)導(dǎo)致圖片的比例失調(diào)湾蔓。所以瘫析，對(duì)于圖片，要保證等比放大默责。也就是說(shuō)贬循，在寬度跟隨屏幕變大的時(shí)候，高度也等比地變大桃序。
圖片相對(duì)于圖標(biāo)來(lái)說(shuō)杖虾，有更高的像素，所以拉大圖片失真的效果并不明顯媒熊。
舉例
以下是網(wǎng)易云音樂(lè)在不同屏幕下的顯示情況奇适。可以看到芦鳍，當(dāng)屏幕加大了之后嚷往，頁(yè)面可以顯示更多的內(nèi)容。
背景適配
如果涉及到背景圖怜校、啟動(dòng)圖等间影，鋪滿整個(gè)畫(huà)面的圖片，需要額外的考慮茄茁。iPhone 5到iPhone 8 Plus屏幕的寬高比是一樣的魂贬，所以直接拉伸圖片就可以了。到了iPhone X裙顽，寬高比加大后付燥，再繼續(xù)拉伸就有可能失真了。
對(duì)于屏幕比例變化的情況愈犹，可以做如下考慮：
適配高度键科，寬度自動(dòng)填充
等比放大圖片后闻丑，如果高度較小，則寬度進(jìn)行自動(dòng)填充勋颖。特別要注意嗦嗡，最好填充的顏色接近于圖片顏色。
適配寬度饭玲，高度度自動(dòng)填充
等比放大圖片后侥祭，如果寬度較小，則高度進(jìn)行自動(dòng)填充茄厘。同樣的矮冬，要考慮填充顏色。
等比放大次哈，超出部分不顯示
等比放大后胎署，超出的部分不顯示。對(duì)于這種情況窑滞，要注意是否截取掉圖片的有用內(nèi)容琼牧。
寫(xiě)在最后
本文只是簡(jiǎn)單的探討了iPhone適配的規(guī)則。現(xiàn)實(shí)中葛假，還有很多的因素需要考慮障陶。有時(shí)候，對(duì)于某些特殊的頁(yè)面聊训，可能還會(huì)根據(jù)不同的屏幕出不同的方案抱究。
《iPhone屏幕分辨率和適配規(guī)則（基礎(chǔ)篇）》
《iPhone屏幕分辨率和適配規(guī)則（規(guī)則篇）》
《iPhone屏幕分辨率和適配規(guī)則（實(shí)現(xiàn)篇）》
