信不信由你！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
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系列裝置媒體查詢：
@media only screen and (min-device-width: 320px){
//針對iPhone 3
}
@media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
//針對iPhone 4, 5c,5s, 所有iPhone6的放大模式，個別iPhone6的標準模式
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
//針對大多數iPhone6的標準模式
}
@media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
//針對所有iPhone6+的放大模式
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio: 3) {
//針對所有iPhone6+的標準模式,414px寫為412px是由於三星Nexus 6為412px，可一併處理
}結論是，做移動端Web相容測試時候，不能將Chrome模擬效果同iPhone6/Plus真機完全劃等號。一定要在確認了iPhone裝置所處顯示模式和真實屏寬後再針對性的進行除錯。
退一步說，姑且認為標準模式和放大模式下裝置寬度都是320px的情況屬於個例。不過在沒有確認iPhone6/iPhone 6 Plus是處於標準模式還是放大模式的前提下，來測試CSS媒體查詢程式碼，來檢視真機預覽效果，都是不靠譜的做法。因此，在未確認裝置顯示模式的情況下，這個結論是完全成立的：iPhone6屏寬不一定是375px，iPhone6 Plus屏寬不一定是414px。
轉載請註明：原創文章來自CSDN freshlover的空間 http://blog.csdn.net/freshlover/article/details/44454991