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

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

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

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

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

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

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

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

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

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

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

?

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

有關(guān)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/

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。