信不信由你！iPhone6屏幕寬度不必定是375px，iPhone6 Plus屏幕寬度不必定是414px

看到這個題目你可能不信，引出這個問題的原因是幾回項目中Chrome模擬器和iPhone6真機預覽效果不一致。

 

爲何在Chrome Emulation模擬手機頁面和真機預覽效果不一致？

 

之前以爲不外乎兩個緣由：

1.某些機型或瀏覽器對一些CSS屬性不支持。

2.某些設備不支持12px如下字體。

今天要補充的第3個緣由是對於iPhone手機還會與手機系統設置的顯示模式、設備硬件有關。

 

下面開始討論iPhone6/iPhone6 Plus的設備屏寬，這裏說的設備屏幕寬度專指設備物理顯示尺寸（device-width），咱們知道蘋果從iPhone4開始引進了Retina屏幕，一個CSS像素能夠表示多個物理像素（固然，在頁面縮放到其餘比例時候，也能夠作到CSS 的1px表示多個device pixels，只不過致使的是清晰度的不一樣）。首先要明確，咱們前端開發中的CSS pixels和設備分辨率所講的resolution pixels 無關。因爲咱們大部分移動設備默認的viewport都是980px，多數狀況下要大於device-width。因此爲了閱讀方便，咱們通常都要在移動端重置viewport，讓width=device-width。再這樣能夠作到按頁面寬度100%充滿屏幕，水平不出現滾動條，使得閱讀瀏覽體驗更佳。補充一下，經過JavaScript獲取viewport的方式：document.documentElement.clientWidth，獲取device-width的方式window.innerWidth。今天要說的就是設備屏寬device-width問題。

 

iPhone6設備屏幕寬度是375px，iPhone 6Plus設備屏幕寬度414px，這是咱們前端開發人員一貫堅信的「真理」。可今天我要質疑這個已成的定論。

 

去年iPhone6/iPhone 6+剛上市時，用js檢測過iPhone6與iPhone 6 Plus的屏幕寬度，獲得的結果都是iPhone6屏幕寬度375像素，iPhone6 Plus屏寬414像素（默認標準模式）。後來就一直堅信這一結論，直到今天，項目在Chrome下模擬iPhone6 Plus的效果，調試完成後，用真機測試居然不認識@media only screen and (min-device-width: 414px) and(-webkit-min-device-pixel-ratio: 3)這個媒體查詢，這已經不是第一次遇到這種狀況了，以爲有必要刨根問底，把「肇事者」揪出來，因而開始不停的測試，查找緣由所在。

 

首先查找CSS代碼的問題，查了reset樣式，也進行了CSS validate，沒有收穫。

既然CSS Media Query媒體查詢代碼並沒生效，隱隱約約開始懷疑曾經本身親自證明的結論，也就是咱們一直認爲的：iPhone6設備屏幕寬度是375px，iPhone 6 Plus設備屏幕寬度414px。

 

懷疑歸懷疑，可是本身也不相信會推翻原有結論。並且，常常在國外的技術網站和Stack Overflow遊蕩，從未遇到過例外啊！只是不放心，爲圖個心安，因而帶着覈實狀況的內心繼續用JS代碼來探測設備的寬度。

 

JavaScript代碼只須要兩句：

alert(window.innerWidth);

alert(window.devicePixelRatio);

一個檢測屏幕寬度，第二句檢測設備像素比。

 

借來了許多同事的iPhone6和iPhone6 Plus，看到測試結果差點把我驚呆了。有的設備寬度是320，有的是375，有的414，亂了。。。

 

後來發現從iPhone6開始，系統設置提供了「顯示模式」設置。

 

「顯示模式」分爲「標準」和「放大」兩種選擇：若是想讓iPhone 6/6 Plus 桌面應用圖標顯示效果變得更小，能夠設置爲「標準」模式。想要大圖標的顯示效果，則能夠設爲「放大」模式。

 

設置操做步驟爲：

 

1.      點擊桌面的設置（Settings）

 

 

 

2.      下滑找到「顯示與亮度」項。

 

 

3.      點擊「顯示模式」。

 

4.      在「標準」與「放大」兩者之中選擇一個，點擊右上角「設定」。

 

5.      最後再點擊底部彈出的「使用xx模式」選項進行確認，手機重啓。

 

經過切換兩種顯示模式，用JS獲取到如下數據：

 

iPhone6 Plus第一個設備（白）：

iPhone6 Plus在標準模式：   屏幕寬度414px，像素比爲3. （iOS 8.1.3  (12B466)）

iPhone6 Plus在放大模式：   屏幕寬度375px，像素比爲3. （iOS 8.1.3  (12B466)）

標準模式屏寬414，放大模式屏寬375.

 

iPhone6 Plus第二個設備（銀）：

iPhone6 Plus在標準模式：   屏幕寬度414px，像素比爲3. （iOS 8.2  (12D508)）

iPhone6 Plus在放大模式：   屏幕寬度375px，像素比爲3. （iOS 8.2  (12D508)）

標準模式屏寬414，放大模式屏寬375.

 

iPhone6 Plus第三個設備（白）：

iPhone6 Plus在標準模式：   屏幕寬度414px，像素比爲3. （8.1.1  (12B436)）

iPhone6 Plus在放大模式：   屏幕寬度375px，像素比爲3. （8.1.1  (12B436)）

標準模式屏寬414，放大模式屏寬375.

 

 

iPhone6第一個設備（白）

iPhone6 在標準模式：   屏幕寬度320px，像素比爲2. （iOS 8.2  (12D508)）

iPhone6 在放大模式：   屏幕寬度320px，像素比爲2. （iOS 8.2  (12D508)）

標準模式和放大模式屏寬均爲320.

 

iPhone6第二個設備（白）

iPhone6 在標準模式：   屏幕寬度375px，像素比爲2. （iOS 8.1.3  (12B466)）

iPhone6 在放大模式：   屏幕寬度320px，像素比爲2. （iOS 8.1.3  (12B466)）

標準模式屏寬375，放大模式屏寬320.

 

iPhone6第三個設備（銀）

 

iPhone6 在標準模式：   屏幕寬度375px，像素比爲2. （iOS 8.2  (12D508)）

iPhone6 在放大模式：   屏幕寬度320px，像素比爲2. （iOS 8.2  (12D508)）

標準模式屏寬375，放大模式屏寬320.

 

iPhone6第四個設備（白）

 

iPhone6 在標準模式：   屏幕寬度375px，像素比爲2. （iOS 8.1  (12B411)）

iPhone6 在放大模式：   屏幕寬度320px，像素比爲2. （iOS 8.1  (12B411)）

標準模式屏寬375，放大模式屏寬320.

 

 

 

經過觀察咱們能夠發現，iPhone6 Plus在放大模式的屏寬等於iPhone6標準模式屏寬，大部分iPhone6在放大模式的屏寬等於iPhone5/5s的屏寬，這意味着，iPhone6 Plus在放大模式下的顯示內容是和iPhone6的標準模式同樣的，iPhone6放大模式的內容和iPhone5s的顯示內容是接近的。但也有例外，某些iPhone6不管何種顯示模式屏寬都是320px。不管在初始設置的時候你選擇了哪一個顯示模式，以後你都是能夠進行改變並切換的。

 

是什麼緣由形成的，這裏不得而知，推測大概與出廠硬件的屏幕材質有關係。或許這種某些iPhone6的特殊狀況只在大陸存在吧~~鄙視下蘋果區別對待大陸用戶的作法！！！

 

這就引出一個問題，咱們在對iPhone設備適配時候，又多出幾種狀況。iPhone系列設備媒體查詢：

 

[css] view plain copy

 

1. @media only screen and (min-device-width: 320px){  
2.          //針對iPhone 3  
3. }  
4.    
5. @media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {  
6.          //針對iPhone 4, 5c,5s, 全部iPhone6的放大模式，個別iPhone6的標準模式  
7. }  
8. @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {  
9. //針對大多數iPhone6的標準模式  
10. }  
11.    
12. @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {  
13. //針對全部iPhone6+的放大模式  
14.    
15. }  
16. @media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {  
17. //針對全部iPhone6+的標準模式,414px寫爲412px是因爲三星Nexus 6爲412px，可一併處理  
18.    
19. }  

 

 

結論是，作移動端Web兼容測試時候，不能將Chrome模擬效果同iPhone6/Plus真機徹底劃等號。必定要在確認了iPhone設備所處顯示模式和真實屏寬後再針對性的進行調試。

 

退一步說，姑且認爲標準模式和放大模式下設備寬度都是320px的狀況屬於個例。不過在沒有確認iPhone6/iPhone 6 Plus是處於標準模式仍是放大模式的前提下，來測試CSS媒體查詢代碼，來查看真機預覽效果，都是不靠譜的作法。所以，在未確認設備顯示模式的狀況下，這個結論是徹底成立的：iPhone6屏寬不必定是375px，iPhone6 Plus屏寬不必定是414px。