iphone/ipad/Android遊戲推薦/App程式開發/物聯網藍牙程式開發/行銷資訊站/SEO網站優化/手機App行銷/Apple中文網/網站建置

關於部落格

google_ad_client = "ca-pub-5406775033591581";
google_ad_slot = "9014874745";
google_ad_width = 250;
google_ad_height = 250;



  • 700558

    累積人氣

  • 34

    今日人氣

    0

    訂閱人氣

iPhone 6 Screens Demystified兼容iphone6的設計方法

詳細的說明請參考 PaintCode 一文:iPhone 6 Screens Demystified

相比iPhone5,iPhone6 ​​擁有更高分辨率的retina HD display,而iPhone6 ​​plus的像素密度達到了401ppi,相比原來的326ppi,提升了25%,顯示畫面細節更豐富。
 
iPhone6 ​​Plus設備高為736pt,寬為414pt,縮放比例為@3X,分辨率為2208*1242,在這個分辨率下渲染後,圖像等比降低分辨率至1920*1080,設備像素比( DevicePixelRatio,縮寫DPR)為2.6 (3/1.15=2.6,同樣大小的屏幕上像素點由一個變為6.76個),下圖來自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的機器到手再做測試下,到時會更新文章反饋大家~
 
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2) { /* 兼容iphone 6 */ 
.class{ }
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:2.6) { /* 兼容iphone6 ​​plus */ 
.class{ } 
}
適配這事情,還是要結合具體的項目,看老闆的臉色,看用戶的心思,總之,在開發的角度上看,提前做好準備,保證產品的質量和體驗,搞不好老闆就給你加薪~
 
相簿設定
標籤設定
相簿狀態