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

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

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

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

說夸張點，即使做了非常詳細嚴格的標注，程序員開發(fā)的第一個包也是一坨翔，因為他們根本不會認真仔細看標注。我合作過多家公司幾十名幾乎覆蓋全部12星座的程序員，沒有一個在打第一個包時會嚴格按照標注，你得一遍一遍地去驗收，耗上生命，直到調(diào)整完美。

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

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

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

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

里面包含五個元素：導航標題、導航圖標、列表圖標、列表文字、間距

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

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

1.新建750*1334界面

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

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

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

完成！

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

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

1.新建1242*2208界面

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

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

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

完成！

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