信不信由你！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。