北京時間2014年9月10日凌晨1點，蘋果公司正式發布其新一代產品 iPhone6，相信做webapp開發的同學對它是充滿了好奇和等待，也擔心它帶來各種坑爹，高清的分辨率，升級的retina顯示屏，我們該如何做好適配呢？

相比iPhone5，iPhone6擁有更高分辨率的retina HD display，而iPhone6 plus的像素密度達到了401ppi，相比原來的326ppi，提升了25%，顯示畫面細節更豐富。

iPhone6 Plus設備高為736pt，寬為414pt，縮放比例為@3X，設備像素比(DevicePixelRatio，縮寫DPR)為3.0，分辨率為2208*1242，在這個分辨率下渲染后，圖像等比降低分辨率至1920*1080，下圖來自paintcodeapp官網，解析iphone6 6plus分辨率：

iPhone6 plus的高清分辨率(1920*1080)讓人感到擔憂，而事實上這樣的設備市場上早就有，如三星的Galaxy S4(分辨率：1920x1080；設備像素比：3.0)，只是用戶數并不龐大，webpp開發對它的適配也是從原始的iphone 4設計稿960*640做起，保證內容的正常展現。iPhone6 plus的出現是對它的進一步推動，而對視覺和前端無疑是一項新的挑戰。

那么，我們是否要專門為iphone 6 plus?1920*1080的頁面單獨做一套適配呢？

讓我們先看騰訊云分析2014年第二季度移動行業數據報告，該數據覆蓋的設備超過15億，是非常具有參考價值的，先了解android屏幕分辨率排名：

可以看出大屏手機是未來趨勢，雖然這樣，但減去大屏手機所占的比例，其它android手機所占比例為61.5%，也就是說目前窄屏手機占了絕大多數，再看高端的iphone機器比例：

iPhone 4 依然擁有最多的用戶數，不容忽視它的價值。雖然大屏手機是趨勢，但我們的視覺稿應該是適配大部分的設備，目前數據上看，960*640或1136*640依然是我們設計的規格，從最多用戶數的設備進行設計，大屏手機正常展現，向前兼容，向后看齊，可以解決大部分問題。

那么，這對視覺稿的要求比較高，如果設計一套頁面，在所有ios和android設備都展現良好，是不需要對iPhone6做適配的；如果展現效果一般(例如大屏手機下內容太小)，需要對頁面再進一步適配，可以理解為我們常說的響應式設計。

這里筆者在近期的資料想出一個方法，利用CSS媒體查詢做兼容，僅供參考，是否存在問題還要等待iPhone 6的機器到手再做測試下，到時會更新文章反饋大家(內容更新于20140928，修改了設備像素比為3.0)~

@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */ .class{} } @media (device-width:414px) and (-webkit-min-device-pixel-ratio:3.0){/* 兼容iphone6 plus */ .class{} }

適配這事情，還是要結合具體的項目，看老板的臉色，看用戶的心思，總之，在開發的角度上看，提前做好準備，保證產品的質量和體驗，搞不好老板就給你加薪~

?

有關retina顯示屏的原理，之前寫過一篇文章《高清顯示屏原理及設計方案》，推薦大家閱讀。

有關iPhone4和iPhone5的兼容，之前寫過一篇文章《兼容iPhone4和iPhone5的方法》。

?

參考資料：

iphone-6/specs

retina HD display

Confirmed iPhone 6 and 6 Plus viewport device-width

iPhone 6 and 6 Plus Responsive Breakpoints

iPhone 6 Screens Demystified

iPhone 6 Screens Demystified(中文圖解)

Device pixel density tests

?

作者：白樹

出處：http://peunzhang.cnblogs.com/

總結

以上是生活随笔為你收集整理的【原】iphone6来了，我该做点什么(兼容iphone6的方法)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。