原文：http://www.zcool.com.cn/article/ZMTE0MjMy.html
有幸在9月25日拿到了iP6和iP6 Plus的真機，恰好又要做適配APP的工作（從iphone5上適配到iphone6和ip6 plus上），所以在真機上研究了下蘋果官方在不同分辨率下對系統APP所做的適配。同時在網上也沒找到相關的真機對比截圖說明什麼的，又有朋友問我要IP6和PLUS的真機截圖回去自己研究，既然這樣，那麼幹嘛不利用自己已有的資源，讓更多的設計師受益呢？所以那就說點什麼吧，拋磚引玉，希望大家可以共同研究，少走些彎路，共同成長。
之前看過@jingdesign 的關於適配ip6的文章：快速適配iPhone6及plus的訣竅，
還有@羅磊的文章：Web開發者和設計師必須要知道的 iOS 8 十個變化。作爲參考（有摘抄部份）。
------------------------------------------------------------------
正文：
首先我們先看一下iphone5,iphone6和iphone6 plus的一些數據：
iphone5/s iPhone 6 iPhone 6 Plus
尺寸 4” 4.7” 5.5”
Viewport’s device-width (in CSS pixels) 320 375 414
Viewport’s device-width (Android設備同分辨率參考) 360 360 400
Device Pixel Ratio 像素比 2 2 3 (近似值)
Rendered Pixels 渲染像素 (默認 viewport size * dpr) 640x1136 750×1334 1242×2208
Physical pixels 物理像素（手機顯示像素） 640x1136 750×1334 1080×1920
圖片資源後綴名 @2x @2x @3x
Status Bar 狀態欄高 (px) 40 40 60
Title Bar 導航條高 (px) 88 88 132
Tab Bar 底欄高 (px) 98 98 147
桌面 icon (px) 120 120 180
這裏是給前端參考的：iPhone 6與 iphone 5一樣，像素比都是2，但是另一方面 iPhone 6 plus 401的dpi真實的像素比值應該大約是2.60。爲了解決這個問題，蘋果又整了個新概念rendered pixels 渲染像素，如果像素比是3x,那麼理論上一個css寬設爲414px的屏幕應該擁有1242px的物理像素（現實中是1080px，小了13%）。（像素比的計算方法是：前端的代碼是把iPhone4，5的屏幕寬度寫爲320px，而此時 iphone4，5的所有產品實際寬的像素是640PX，所以像素比是2，iphone6的 CSS 中是375px,實際像素是750px,像素比也是2，而 plus 就不是了。）
因此，如果你使用一個3x的圖給高清的安卓設備，同樣這樣圖也會適配 iPhone 6 Plus 但是iPhone 的瀏覽器在渲染在屏幕之前首先會調整圖片大小。
然後我把3個屏幕的App Store界面截圖拿來對比一下：（無法查看原圖？），點擊這裏可以查看高清大圖
從圖上可以看出來：
一：Title bar和Tab bar 高度
Title bar ： ip5/6的 高度是128px，plus 的高度是192px （128x1.5=192）
Tab bar ： ip5/6的 高度是98px ， plus 的高度是147px （ 98x1.5=147）
ip5和ip6的Title bar和Tab bar的高度沒變,並且tab bar的icon的大小也沒變，只是整欄的寬拉伸了，所以IOS工程師在早期開發的時候如果用的是Autolayout自動佈局會很爽，如果是佈局寫死了，那真是要一個界面一個界面的改了。
結論：類似的狀態欄高度不變，可以直接拉伸寬度調整間距即可，還有設置界面等，甚至代碼是自動佈局的話間距都不用調。
二：Tab bar的icon大小
圖中標識的是排行榜的大小：ip5=46x46px , ip6=46x46px，ip6plus=69x69px（是46px的1.5倍）。
結論：ip6的icon,大多可以直接使用ip5的資源，plus的icon需要把ip5的icon資源x1.5倍即可，（我們當時開發xx軟件的時候，android的設計尺寸是基於1080P的，我把android的資源拿出來用在plus上是完全可以的，所以開發android用的是1080P屏幕的設計師有福了，以上劃線文字是原文，有錯誤不嚴謹的地方，1080P，可以將就用，我曾經把我們的
android 的1080P資源名稱改成@3x，沒調整大小直接放到 xcode裏，模擬器跑起來 icon是很清楚的，這也可能是我們的 android 並不是640直接縮放到1080，而是每個界面手動調整的，所以資源可以暫用到 plus 上，我初期剛適配的時候是這麼幹的，後來發現部分圖標無法識別，所以現在我又在把那些資源一個一個手動的調整成 plus 可用的 3倍（@3x）大小。）
（在解釋一下：例如ip5的某個icon名爲:[email protected]，那麼我把android裏面相同的icon拿過來改名子爲 [email protected]，直接扔到[email protected]的同文件夾裏面，xcode可以識別爲plus的資源的，並且模擬器跑起來後icon的確變成高清的了，和別的沒有替換的區別很明顯。）
<img src="lores.png" srcset="hires.png 2x, superhires.png 3x">
在上面這段代碼的例子中，iPhone 6 Plus 的像素比是3x，它會加載superhires.png這張圖片，而iPhone 5s,iPhone 6 則會加載hires.png這種圖，其餘的則加載lores.png。
順便說一句：以前IOS6,IOS7的時候看到app store首頁更改了排版的樣式，之前的樣式記得是每個分類兩排向下無限列出，現在界面內的每個分類使用的是橫排可以無限滑動的樣式，也就是可以不用固定在一屏內，ip6出現前並不理解這種排版樣式，也沒有發現這個排版的好處，當ip6和plus出現後，這種排版的樣式的好處則顯而易見，因爲這樣會更容易方便的適配各種分辨率的屏幕。所以，當你的APP單個界面有多個分類並且內容很多需要排列的時候，建議參考app store的樣式，如果有更好的樣式也可以分享出來哦。
根據 app store 的截圖來看，在未來設計 APP 的時候，資源有限的情況下，建議設計2套尺寸：
以640x1136px爲基礎去適配 iphone4,5,6,（ip6可以在ip5的基礎上空白區域拉伸，位圖則要等比縮放），
以1242x2208px的尺寸去設計 iphone6 plus, 因爲 xcode 的工程文件及 plus 代碼及截圖都是1242x2208px的分辨率，只是屏幕物理大小是1080x1920px，所以按照1242x2208px的尺寸去設計，plus 上顯示的物理大小纔會正常，並且切圖也纔會是@3x.如果用1080P切圖，圖標資源肯定會不清楚。（如果你們的設計師人數足夠多，當然iphone6也要單獨設計一套。）
------------------------------------------------------------------
三：banner
ip5的banner是640x260px，ip6是750x304px (即ip5的640x260px等比縮放後的大小）。
ip6 plus排版已變化，banner圖的樣式變的和ipad類似，顯示3個，其中1個主顯示，2個是可預覽的。主大小爲795x387px. 比例和ip5,6都不一樣，所以各家app可能需要根據自己的需要去重新排版調整了哦。
結論：類似的位圖，ip6等比放大即可，plus需要單獨重新排版調整。
四：相冊
在看相冊的變化（ip6 plus 對比 ip6截圖），類似的位圖應該都是等比放大的，並沒有像 app store單行增加數量，ip6相冊單個圖片的大小是186x186px，plus 的單個大小是309x309px，
所以類似相冊這樣的界面， 可以等比縮放就可以了。
------------------------------------------------------------------
五：桌面 Icon:
在來看一下桌面icon的大小對比
iphone5=120x120px iphone6=120x120px iphone6 plus=180x180px (是iphone5/6的1.5倍，即@3x)
結論：icon要出一套180x180px的尺寸。
同理：關於啓動圖，也就是閃屏，如果你的webapp有一個啓動圖，那麼你又得增加兩行代碼適配新 iPhone 了。閃屏iPhone 6對應的圖片大小是750×1334px，iPhone 6 Plus 對應的是1242×2208px.
------------------------------------------------------------------
六：自動佈局及 svg 等
蘋果好像在IOS6的時候就提供了一種解決方案，自動佈局Auto Layout ：Auto Layout Guide: Introduction，如果設計師瞭解html和css會容易理解一些，我自己也只是瞭解html的皮毛，設計師在設計界面的時候標註的數據最好不要寫固定的多少px,使用絕對定位那是iP4之前的方案，尤其現在出來了ip6和plus，如果現在還用絕對定位，設計師和工程師效率會很低，所以我們和工程師溝通的時候最好使用的是靠左，右多少，居中，及控件在屏中大小及位置是幾分之幾之類的標註，Auto Layout可以根據不同的設備尺寸自動計算UIView的frame，這樣會更有效方便的適配更多的尺寸。
Xcode6已經開始支持 svg 格式的矢量圖片了，和我們的工程師溝通說可以直接出一張 svg 的圖片即可，我用 PS 的一個插件zeick可以導出 svg ，但是這插件是收費的，不知道大家有沒有更好的方式，可以用 PS CC導出svg格式的工具/插件？
------------------------------------------------------------------
所有的ip6&plus真機截圖放在附件裏面供大家下載研究。(壓縮包是mac自帶壓縮的，在windows解壓可能會亂碼，哪位朋友方便可以重新上傳一次分享給大家哦。) 下載鏈接： http://pan.baidu.com/s/1gdxhv5x
轉載請保留以下信息，因爲我還會針對不嚴謹的地方及新的發現隨時修改。（最後更新於2014-10-29 09：50）
————————————————————————————————————————————
本文轉載自站酷網，作者@youngxkk
原文地址 http://www.zcool.com.cn/article/ZMTE0MjMy.html
—————————————————————————————