iphone6&iphone6 plus

面开始讨论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。无论在初始设置的时候你选择了哪个显示模式,之后你都是可以进行改变并切换的。

这就引出一个问题,我们在对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,可一并处理
 
}


转载于:https://my.oschina.net/u/232595/blog/424529

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值