前端必看！iPhone 5快速適配6/6 Plus

許多新人問我適配的問題，他們很疑惑——他們知道iPhone 5用2@的切片，6 Plus用3@的切片，是5的1.5倍。所以，他們做好iPhone 5的設(shè)計(jì)稿后，整個(gè)乘以1.5倍后分辨率是960*1704，發(fā)現(xiàn)與iPhone 6 Plus的分辨率不一致。

我也看過有一些設(shè)計(jì)師的適配方法，用750*1334也就是iPhone 6去向上和向下適配，我沒有仔細(xì)去看其中的步驟，看見寫了很大篇幅的內(nèi)容，感覺很復(fù)雜，所以我把自己的適配方法分享出來，如有錯(cuò)誤也請(qǐng)指正。

因?yàn)閕Phone 6和6 Plus同時(shí)上市，而5很早就有，也就是說5的設(shè)計(jì)稿我們都有，只需要向上適配2個(gè)機(jī)型就可以了。如果從iPhone 6適配，就得重新畫一套6的設(shè)計(jì)稿，沒必要。并且，以iPhone 5適配，只需要給5做標(biāo)注，6不用任何工作，共用5的2@切片，再給6 Plus切一套3@的切片就夠了。6 Plus也不用標(biāo)注，程序員會(huì)根據(jù)5的標(biāo)注乘以1.5倍。

說夸張點(diǎn)，即使做了非常詳細(xì)嚴(yán)格的標(biāo)注，程序員開發(fā)的第一個(gè)包也是一坨翔，因?yàn)樗麄兏静粫?huì)認(rèn)真仔細(xì)看標(biāo)注。我合作過多家公司幾十名幾乎覆蓋全部12星座的程序員，沒有一個(gè)在打第一個(gè)包時(shí)會(huì)嚴(yán)格按照標(biāo)注，你得一遍一遍地去驗(yàn)收，耗上生命，直到調(diào)整完美。

目前主流iOS機(jī)型的分辨率如下：（注：iPhone 6 Plus的制圖分辨率是1242*2208）

其實(shí)該3種機(jī)型分辨率的比例非常接近，把750*1334和1242*2208都按寬度640換算，其高度都是1138，比1136多2px。

下面以iPhone 5界面來講解向上適配的原理

界面可以劃分為三個(gè)區(qū)域：狀態(tài)欄、導(dǎo)航欄、列表欄

里面包含五個(gè)元素：導(dǎo)航標(biāo)題、導(dǎo)航圖標(biāo)、列表圖標(biāo)、列表文字、間距

重要的事說三遍。適配iPhone 6不用設(shè)計(jì)師重新排版，開發(fā)會(huì)根據(jù)5的切圖進(jìn)行適配。適配iPhone 6不用設(shè)計(jì)師重新排版，開發(fā)會(huì)根據(jù)5的切圖進(jìn)行適配。適配iPhone 6不用設(shè)計(jì)師重新排版，開發(fā)會(huì)根據(jù)5的切圖進(jìn)行適配。

如果硬要輸出6的設(shè)計(jì)稿，可以這樣：

1.新建750*1334界面

2.將iPhone 5設(shè)計(jì)稿與之上對(duì)齊、左對(duì)齊

3.將iPhone 5設(shè)計(jì)稿中居中的內(nèi)容在6上保持居中

4.將iPhone 5設(shè)計(jì)稿中右邊的內(nèi)容移至右邊，邊距與5保持一致

完成！

適配iPhone 6 Plus，只需提供3@的切片給開發(fā)延用5的標(biāo)注進(jìn)行適配

如果需要輸出6 Plus的設(shè)計(jì)稿，可以這樣：

1.新建1242*2208界面

2..將iPhone 5設(shè)計(jì)稿乘以1.5倍后與之上對(duì)齊、左對(duì)齊

3.將1.5倍后的iPhone 5設(shè)計(jì)稿中居中的內(nèi)容在6 Plus上保持居中

4.將1.5倍后的iPhone 5設(shè)計(jì)稿中右邊的內(nèi)容移至右邊，邊距與之保持一致

完成！

看完適配原理，最后看一下以淘寶iPhone 5的界面適配6和6 Plus的實(shí)例：