初代iPhone

2007年，初代iPhone發(fā)布，屏幕的寬高是 320 x 480 像素谈为。下文也是按照寬度旅挤，高度的順序排列。這個(gè)分辨率一直到iPhone 3GS也保持不變伞鲫。

那時(shí)編寫iOS的App(應(yīng)用程序)粘茄，只支持絕對定位。比如一個(gè)按鈕(x, y, width, height) = (20, 30, 40, 50)秕脓，就表示它的寬度是40像素柒瓣，高度是50像素，放在(20, 20)像素的位置吠架。

iPhone 4

2010年芙贫，iPhone 4發(fā)布，率先采用Retina顯示屏诵肛，在屏幕的物理尺寸不變的情況下屹培，像素成倍增加，達(dá)到 640 x 960 像素怔檩。

這樣就出現(xiàn)一個(gè)問題，怎么讓原有的App運(yùn)行在新的手機(jī)上面蓄诽？iPhone手機(jī)一個(gè)優(yōu)勢薛训，就是有眾多優(yōu)秀的App，假如不兼容原有的App仑氛，就相當(dāng)于放棄這個(gè)得來不易的優(yōu)勢乙埃，是很不明智的。

每當(dāng)iPhone的屏幕有所變化锯岖，比如iPhone 3GS過渡到iPhone 4, iPhone 4過渡到iPhone 5, iPhone 5過渡到iPhone 6介袜，蘋果公司都需要想辦法來解決上述的兼容問題。

為了運(yùn)行之前的App出吹，引入一個(gè)新的概念point(點(diǎn))遇伞。點(diǎn)這個(gè)概念在iOS開發(fā)中十分重要，而非開發(fā)者很少關(guān)注捶牢。iPhone 4屏幕尺寸繼續(xù)保持320 x 480鸠珠，不過單位并非是像素，而是點(diǎn)秋麸。

在iPhone 3GS中渐排，1個(gè)點(diǎn)等于1個(gè)像素。也就是說灸蟆，點(diǎn)跟像素可以直接互換驯耻。

在iPhone 4中，1個(gè)點(diǎn)等于2個(gè)像素。

iPhone 4和iPhone 3GS的屏幕尺寸實(shí)際上是一樣的可缚，都是3.5英寸霎迫。同樣一個(gè)點(diǎn)城看，實(shí)際上看起來是一樣的测柠。只是iPhone 4在單位英寸上像素更多炼鞠，看起來更細(xì)膩谒主。

開發(fā)iOS的時(shí)候，使用點(diǎn)作為基本單位會(huì)更加方便赃阀。列表對比

這里的屏幕模式可以初步理解成榛斯，一個(gè)點(diǎn)等于多少個(gè)像素驮俗。2x王凑，就是1個(gè)點(diǎn)等于2個(gè)像素工碾。

總結(jié)一下單位

手機(jī)屏幕的物理長度渊额，使用英寸作為單位端圈。比如iPhone 4屏幕是3.5英寸，iPhone 5 是4英寸宴倍，iphone 6是4.7英寸鸵贬，這里的數(shù)字是指手機(jī)屏幕對角線的物理長度。

屏幕像素兆衅，比如iPhone 3GS屏幕是320 x 480像素，iPhone 4是640 x 960像素畏铆，這里的像素可以想象成屏幕上真正用來顯示顏色的發(fā)光小點(diǎn)辞居。

點(diǎn)，開發(fā)App時(shí)候使用的單位倚搬，是一個(gè)虛擬的單位捅僵，并非實(shí)際存在的庙楚，因此點(diǎn)有時(shí)也叫虛擬點(diǎn)酪捡。點(diǎn)這個(gè)單位，用于屏蔽各個(gè)屏幕設(shè)備的不同永罚，兼容以前的程序呢袱。

每英寸有多少個(gè)像素惕蹄，稱為ppi(pixel per inch)卖陵。我們可以簡單算算，iPhone 4是640 x 960像素鸥滨，對角線就是1154像素，除以3.5英寸凸主，應(yīng)該是330ppi。而官方給出的數(shù)字是326ppi嗡官。當(dāng)像素太密衍腥，超過300ppi的時(shí)候，人眼也就不能區(qū)分出每個(gè)像素尚骄。因此iPhone 4的屏幕叫作Retina顯示屏憾儒。Retina在英文中，是視網(wǎng)膜的意思训裆。

iPhone 4之后(x, y, width, height) = (20, 30, 40, 50)，就表示高度為40個(gè)點(diǎn)变姨，寬度為50個(gè)點(diǎn)，放在(20, 20)個(gè)點(diǎn)的位置砍鸠。這種處理方法，將之前以像素作為單位自動(dòng)轉(zhuǎn)換成以點(diǎn)作為單位饭弓，使得iPhone 3GS的應(yīng)用程序，不用修改也可運(yùn)行在iPhone 4上面。

文字冲秽，顏色等是矢量數(shù)據(jù)，放大不會(huì)失真民轴。原有的iPhone 3GS程序瑰钮，在iPhone 4上面運(yùn)行，文字顯示也十分清晰苟耻。

而圖片并非矢量數(shù)據(jù)，處理方式有所不同智蝠。假設(shè)圖片 example.png，大小為 30 x 40像素（這里的單位是像素毛秘，數(shù)字圖片的單位通常都為像素）。當(dāng)這張example.png在iPhone 3GS和iPhone 4中使用時(shí)候，都占據(jù)屏幕上30 x 40個(gè)點(diǎn)奋献。而因?yàn)閕Phone 4中1個(gè)點(diǎn)等于2個(gè)像素，也就是30 x 40像素的圖片窃这，占據(jù)了60 x 80像素的屏幕祟敛，因此這圖片在iPhone 4中看起來就會(huì)模糊。

開發(fā)的時(shí)候叼架，為使得圖片清晰，需要進(jìn)行圖片適配乍构。這時(shí)需要準(zhǔn)備兩張內(nèi)容相同的圖片，放在同一目錄下。

example.png// 30 x 40像素

example@2x.png ? // 60 x 80像素

當(dāng)程序中使用example.png的時(shí)候仪召，會(huì)根據(jù)屏幕模式自動(dòng)選擇對應(yīng)的圖片。屏幕1x模式，就會(huì)選擇example.png, 2x模式就會(huì)優(yōu)先選擇example@2x.png玖瘸，假如example@2x.png不存在，就選擇example.png。

圖片跟屏幕一樣殖演，也有1x模式，2x模式彼棍。在iPhone 6 Plus中，還出現(xiàn)3x模式华匾，原理是一樣的。

當(dāng)iPhone 4選中example@2x.png的圖片，就會(huì)生成一張大小為30 x 40個(gè)點(diǎn)持寄，2x模式的圖片。這個(gè)時(shí)候，圖片看起來就會(huì)很清晰了赖欣。而沒有適配的舊程序，example@2x.png不存在，就選中example.png湃交，生成大小為30 x 40個(gè)點(diǎn)息罗，1x模式的圖片，看起來比較模糊挨摸。但它們占據(jù)的屏幕點(diǎn)數(shù)是一樣的刨裆。

iPhone 5

2012年瞬女，蘋果發(fā)布iPhone 5。我們將所有機(jī)型對比报慕，依然采用點(diǎn)作為單位。

跟iPhone 4做比較, iPhone 5的寬度保持不變雨让。高度增加568 - 480 = 88個(gè)點(diǎn)崔挖。

在iOS開發(fā)中匾浪，44這個(gè)數(shù)字比較特殊属拾。iOS界面指南寫著尊浓，人類的手指有一定大小襟诸，點(diǎn)擊區(qū)域低于44個(gè)點(diǎn)的時(shí)候菇用，就難以點(diǎn)中。44的兩倍就是88卦绣。

當(dāng)原有程序沒有適配iPhone 5的時(shí)候玷坠，也可以正常運(yùn)行樟凄，但多出來的88個(gè)點(diǎn)將會(huì)將會(huì)被自動(dòng)均分為上下兩部分，使得上下出現(xiàn)黑邊瞎饲。我找不到好看的圖片。

那么怎樣才能告訴iOS系統(tǒng)炼绘，應(yīng)用程序已經(jīng)適配了iPhone 5呢充尉？在這里蔼紧，我們先扯開一下，談一下啟動(dòng)圖片。

點(diǎn)擊主屏幕的圖標(biāo)热某，進(jìn)入App的時(shí)候译柏，會(huì)立即顯示一張圖片割以，這張圖片就是啟動(dòng)圖片(Launch Image)。App在正式啟動(dòng)的時(shí)需要做一些初始化處理本讥，這通常比較費(fèi)時(shí)珊泳。先出現(xiàn)啟動(dòng)圖片，可以使用戶覺得系統(tǒng)立即有響應(yīng)拷沸，減少等待的焦慮感色查。

每個(gè)機(jī)型，比如同時(shí)支持iPhone和iPad的程序堵漱，需要分別為iPhone跟iPad指定啟動(dòng)圖片综慎。當(dāng)舊的iPhone 4的程序，運(yùn)行在iPhone 5上面勤庐，沒有iPhone 5的啟動(dòng)圖片示惊，就采用兼容模式，上下留黑邊愉镰。當(dāng)為iPhone 5指定了新的啟動(dòng)圖片米罚，系統(tǒng)就認(rèn)為這個(gè)應(yīng)用程序是已經(jīng)適配了iPhone 5的，上下就不會(huì)留黑邊了丈探。下面是微信啟動(dòng)圖片录择，應(yīng)該都很熟悉了。

微信啟動(dòng)圖片中出現(xiàn)的那個(gè)地球碗降，叫藍(lán)色彈珠（The Blue Marble）隘竭，是在1972年12月7日由阿波羅17號太空船的船員所拍攝的。這張照片當(dāng)年很震撼讼渊，是普通人第一次可以通過照片直接看到地球的全貌动看。見問題為什么微信啟動(dòng)界面的地球圖片沒有轉(zhuǎn)到中國這部分？這是否有損用戶體驗(yàn)爪幻？

微信的啟動(dòng)圖菱皆，為適配iPhone 5须误，相比與iPhone 4, 很明顯狹長了。

典型iPhone應(yīng)用程序（游戲除外）仇轻，很多是上面一個(gè)導(dǎo)航欄京痢，下面一個(gè)工具欄或者標(biāo)簽欄, 中間一大塊用于顯示的內(nèi)容區(qū)。iPhone 5拉長了篷店，對于程序的適配祭椰，也不算麻煩，內(nèi)容區(qū)的內(nèi)容基本是動(dòng)態(tài)生成的疲陕。適配時(shí)候可以簡單上下不變吭产，中間的內(nèi)容區(qū)拉長就行了。注意鸭轮，導(dǎo)航欄和工具欄的高度也是44個(gè)點(diǎn)。下面是同一程序橄霉，在iPhone 4跟iPhone 5的對比窃爷。

AutoLayout

到了這個(gè)時(shí)候，傳統(tǒng)絕對定位的弱點(diǎn)就顯露出來了姓蜂。這時(shí)iPhone按照點(diǎn)作為單位按厘，已經(jīng)出現(xiàn)了兩種不同尺寸的屏幕，算上iPad, 就有3種尺寸（有些App可以同時(shí)兼容iPhone和iPad钱慢，稱為Universal）逮京。

從iOS 6系統(tǒng)發(fā)布后，iOS開發(fā)中可以采用一種AutoLayout的技術(shù)束莫。AutoLayout就像網(wǎng)頁一樣懒棉，指定View，Button览绿，Text之間的相對位置策严，比如靠左多少，靠右多少饿敲，居中多少等等妻导。舉個(gè)例子，像下面的簡單布局怀各。

假設(shè)左上角的區(qū)域?yàn)関iew1, 右上角的區(qū)域?yàn)関iew2, 下面的區(qū)域?yàn)関iew3倔韭。AutoLayout會(huì)說:

view1.left =20// View1的左邊距離邊界20個(gè)點(diǎn)

view1.top = 20 ? ? ? ? ? ? ? ?// View1的上邊距離邊界20個(gè)點(diǎn)

view2.right = 20 ? ? ? ? ? ? ?// View2的右邊距離邊界20個(gè)點(diǎn)

view2.top = 20 ? ? ? ? ? ? ? ?// View2的上邊距離邊界20個(gè)點(diǎn)

view2.left = view1.left + 20 ?// View2的左邊距離View1右邊20個(gè)點(diǎn)

view2.width = view1.width ? ? // View1的寬度等于View2的寬度

view2.height = view1.height ? // view1高度等于view2高度

view3.left = view1.left ? ? ? // view3的跟view1左對齊

view3.right = view2.right ? ? // view3跟view2右對齊

view3.top = view1.bottom + 20 // view3的上邊距離view1下邊20個(gè)點(diǎn)

view3.bottom = 20 ? ? ? ? ? ? // view3下邊距離邊界20個(gè)點(diǎn)

view3.height = view1.height ? // view3高度等于view1高度

指定上面的約束條件后，AutoLayout就會(huì)自動(dòng)算出對應(yīng)的布局瓢对。上面我寫得比較繁瑣寿酌，事實(shí)上很多操作都是可以使用鼠標(biāo)拖拉來指定的，并不一定需要使用代碼沥曹。但就算用代碼份名，也有簡寫的方法碟联。下面是在xib中，拖拉鼠標(biāo)指定約束時(shí)的界面僵腺。

而絕對定位鲤孵，會(huì)直接說

view1.frame?=?(x1,?y1,?width1,?height1)

view2.frame?=?(x2,?y2,?width2,?height2)

view3.frame?=?(x3,?y3,?width3,?height3)

絕對定位并非指定約束條件，而是開發(fā)者自己來精確指定View辰如，Button, Text等的實(shí)際坐標(biāo)大小普监。

對于一個(gè)屏幕，絕對定位可能跟AutoLayout的區(qū)別不算大琉兜，甚至絕對定位會(huì)更方便些凯正。但當(dāng)需要同時(shí)適配多個(gè)屏幕，AutoLayout根本不需要更改豌蟋。而絕對定位就需要根據(jù)屏幕大小廊散，一個(gè)個(gè)算出來。比如橫屏梧疲，在AutoLayout下面允睹，就自動(dòng)變成。

這里不過是3個(gè)控件的布局幌氮，當(dāng)出現(xiàn)的控件數(shù)越多缭受，屏幕尺寸越多，AutoLayout的優(yōu)勢就顯露出來了该互。另外AutoLayout有個(gè)好處是容易支持多語言米者，不同語言下，同一個(gè)意思文字的長度是不同的宇智，使用AutoLayout也可以自動(dòng)適配蔓搞。

在iOS 6的時(shí)候，AutoLayout還比較少人使用随橘，當(dāng)時(shí)屏幕尺寸還比較少败明。iOS 7的時(shí)候，就開始很多人使用了太防。而到現(xiàn)在iOS 8了, 更加上iPhone 6, iPhone 6 Plus需要適配妻顶，AutoLayout大勢所趨，不用不行了蜒车。

iPhone 6, iPhone 6 Plus

2014年讳嘱，iPhone 6, iPhone 6 Plus發(fā)布后，情況又有新的變化酿愧。再次比較所有iPhone機(jī)型沥潭。

屏幕尺寸再度分裂。但是我們比較iPhone 5 跟 iPhone 6的寬高比例嬉挡。

可以看出钝鸽，iPhone 6跟iPhone 5雖然屏幕尺寸改變了汇恤，但是它們的比例是不變的。都是 9 ÷ 16 = 0.5625 的屏幕拔恰。

當(dāng)舊的iPhone 5程序運(yùn)行在iPhone 6上面因谎，假如沒有經(jīng)過適配。舊程序自動(dòng)等比放大颜懊，鋪滿新手機(jī)财岔，舊程序也可以正常運(yùn)行。這種方案可算是自動(dòng)適配河爹。但因?yàn)榕f程序拉伸了匠璧，整體看起來有點(diǎn)虛，也不能更好利用大屏空間咸这。

當(dāng)需要開發(fā)者手動(dòng)適配的時(shí)候夷恍，跟iPhone 4過渡到iPhone 5一樣，在新程序中媳维，指定一張新的啟動(dòng)圖片。當(dāng)指定了啟動(dòng)圖侨艾，屏幕分辨率就已經(jīng)變成應(yīng)有的大小拓挥，這時(shí)候利用AutoLayout進(jìn)行布局唠梨，同一份代碼，就可以支持多個(gè)機(jī)型侥啤。新手機(jī)的屏幕更大当叭，有更多的虛擬點(diǎn)，可以顯示更多的內(nèi)容盖灸。

值得注意一點(diǎn)是蚁鳖，iPhone 6 Plus。它的寬高是414 × 736個(gè)點(diǎn)赁炎，3x模式醉箕，理想上來說，應(yīng)該有1242 × 2208像素徙垫。但iPhone 6 Plus的實(shí)際像素是 1080 × 1920讥裤，是比理想值要少一點(diǎn)的。iPhone 6 Plus的處理方式是將程序整體稍微縮小一點(diǎn)姻报。分辨率很高己英，這點(diǎn)區(qū)別，實(shí)際上也看不出來吴旋。這樣處理损肛，可以使得44個(gè)點(diǎn)的點(diǎn)擊區(qū)域約束厢破，在物理上的真實(shí)長度，基本保持不變治拿。

由分析可以看到摩泪，慢慢的為了適配多個(gè)機(jī)型，程序的啟動(dòng)圖片也逐漸增多忍啤，為解決這個(gè)問題加勤。iOS之后，可以使用xib來搭建啟動(dòng)界面同波，這樣就可以同一個(gè)啟動(dòng)界面鳄梅，適配多個(gè)機(jī)型，減少啟動(dòng)圖片占用的空間未檩。

建議

1戴尸、以后的應(yīng)用程序，都使用AutoLayout, 不要再用絕對定位冤狡。

2孙蒙、使用類似網(wǎng)頁的方式來設(shè)計(jì)界面。

3悲雳、設(shè)計(jì)師好挎峦，程序員也好，盡量使用點(diǎn)這個(gè)單位進(jìn)行思考合瓢，而不要使用像素坦胶。比如，你需要做44 x 66個(gè)點(diǎn)的按鈕晴楔，2x模式顿苇，就乘以2, 3x模式就乘以3。這樣的思考方式可以大致估計(jì)到真實(shí)的物理長度税弃。44個(gè)點(diǎn)纪岁，就是手機(jī)上導(dǎo)航欄，工具欄的高度则果。假如用像素思考幔翰，容易使得做出的圖片過大或者過小。

4西壮、非矢量素材导匣，就可以做尺寸最大的，之后再進(jìn)行縮小茸时。比如你需要兼容3x的屏幕贡定，就直接做最高那種圖片。

5可都、而當(dāng)使用Flash之類的矢量工具來做素材的時(shí)候缓待，應(yīng)該直接做點(diǎn)那個(gè)尺寸蚓耽。比如44 x 66個(gè)點(diǎn)的按鈕。就建立一個(gè)44 x 66的場景旋炒。之后再導(dǎo)出成2倍圖步悠，3倍圖，因?yàn)槭噶糠糯蟛皇д嫣闭颉２灰⒁粋€(gè)3x的場景鼎兽，導(dǎo)出成大圖片，再進(jìn)行縮小铣除，這樣就容易失真谚咬。更理想的是直接使用矢量圖。

6尚粘、假如是那種導(dǎo)航欄择卦，工具欄之類的背景圖，需要橫跨整個(gè)屏幕郎嫁”蹋可以只切一小塊，讓程序拉伸泽铛，拉伸方式是保持兩邊的像素不動(dòng)尚辑，只拉伸最中間的一列像素。需要拉伸的話盔腔，橫方向就不要出現(xiàn)一些漸變色杠茬。

7、按鈕的點(diǎn)擊區(qū)域铲觉，不應(yīng)該少于44像素，就算按鈕的圖片看起來比較小吓坚，也應(yīng)該使得點(diǎn)按鈕周圍的透明區(qū)也有反應(yīng)撵幽。

8、可以按照你當(dāng)前最方便測試機(jī)子的型號來做一些主要預(yù)覽圖礁击，效果圖盐杂。比如你手頭有iPhone 5，可以按照iPhone 5的尺寸哆窿，320 x 568個(gè)點(diǎn)链烈，需要兼容iPhone 6 Plus，就使用3x的模式挚躯。這樣方便將圖片放進(jìn)手機(jī)里面看實(shí)際的效果强衡。有多個(gè)測試機(jī)，就選較大的码荔，之后再進(jìn)行一些細(xì)調(diào)漩勤。假如支持iPhone 6 Plus的橫屏模式感挥，需要另外處理。

9越败、上面說的是應(yīng)用的處理方式触幼，游戲會(huì)有些特殊。現(xiàn)在很多游戲究飞，按照1136 x 768的像素尺寸來設(shè)計(jì)場景置谦，這樣可以同時(shí)兼容iPad和iPhone，并只使用一份圖亿傅。iPad 1x模式下尺寸是1024 x 768像素媒峡，iPhone 6在2x模式下，是1136 * 640袱蜡。這種尺寸丝蹭，可以簡單將場景居中顯示，各自將場景拉伸到最大坪蚁。