信不信由你!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系列设备媒体查询:

@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

时间: 2024-10-08 22:25:05

信不信由你!iPhone6屏幕宽度不一定是375px,iPhone6 Plus屏幕宽度不一定是414px的相关文章

android手机旋转屏幕时让GridView的列数与列宽度自适应

无意中打开了一年前做过的一个android应用的代码,看到里面实现的一个小功能点(如题),现写篇文章做个笔记.当时面临的问题是,在旋转屏幕的时候需要让gridview的列数与宽度能自适应屏幕宽度,每个单元格之间还需要保留一定的间距.因为每款手机的屏幕宽度不都相同,我们在指定了单元格的宽度与间距之后,并不能确定每行中所能容纳的单元格数量,这个数量必须在运行时通过计算得出,同样,我们设置的单元格宽度和间距不能保证刚好容纳在屏幕宽度内,为了解决这个问题,设计了一个简单的算法,首先需要预先指定单元格的宽

ios 屏幕,状态栏(statusbar),程序窗口 尺寸获取和屏幕旋转时的尺寸变化

app尺寸,去掉状态栏 CGRect r = [ UIScreen mainScreen ].applicationFrame; 这个尺寸不会随着屏幕旋转而交换宽高,但屏幕旋转后,会自动修改宽高减掉状态栏高度. 竖屏时(4寸):x=0, y=20, width=320, height=548 横屏时(4寸):x=0,y=0, width=300, height=568 屏幕尺寸 CGRect rx = [ UIScreen mainScreen ].bounds; (4寸)rx=x=0, y=0

你们信不信一句Console.WriteLine就能让你的控制台程序失去响应

好久没更新博客了,今天是扒衣见君节,难得闲下来就来说说一个最近有趣的发现吧. 首先废话不多说,直接上代码吧 1 class Program 2 { 3 static void Main(string[] args) 4 { 5 var bytes = new byte[4096]; 6 for (int i = 0; i < bytes.Length; i++) 7 { 8 bytes[i] = 7; 9 } 10 11 Console.WriteLine(Encoding.ASCII.GetS

一招教你摘下月亮送给TA!信不信,我用PPT就能做到

最近抖音有首歌很火,"想摘下星星给你,摘下月亮给你--",是不是也想摘下超美的月亮送给你的男/女朋友呢? 今天就来教大家画一个这样的超美弯弯月亮,不难,用PPT就可以做到哦,快get起来,你也可以摘下月亮送给TA啦! 一.插入图形,填充线条 具体操作:先设置好黑色背景,插入一个圆形,右键[设置形状格式],选择[纯色填充],颜色为黑色,设置[线条]为[无线条]. 二.设置形状格式 具体操作:点击[阴影],选中[预设],找到[内部]选择第一个,接着就可以选择一个喜欢的颜色进行填充: [透明

文本框设置100%宽度,内容过多时所在td的宽度失效

最近在修改项目的一个需求变更时,无意间发现了以前的一个问题, 这里拿出来讨论,可能在其他项目中没有碰到这样的需求或者无意中规避了这个问题 也或许已经有html&CSS高手把问题解决,都请来分享一下经验: 问题描述如下 因为客户不太懂技术,把上述td的宽度设置了百分比,然后为了好看又把里面的文本框也设置了width:100%,想让他自适应 更改之后变成这样 1 <html> 2 <head> 3 4 </head> 5 <body> 6 <tab

Android 为什么计算不出准确的屏幕尺寸的原因,及 Android 获得屏幕物理尺寸、密度及分辨率

DPI:dots-per-inch,每英寸的像素数量,也就是说,密度越大,每英寸内容纳的点数就越多.这个值是设备自己决定并写死的. 计算方法:获取到屏幕的分辨率:point.x和point.y,再取出屏幕的DPI(每英寸的像素数量),计算长和宽有多少英寸,即:point.x / dm.xdpi,point.y / dm.ydpi,屏幕的长和宽算出来了,再用勾股定理,计算出斜角边的长度,即屏幕尺寸. WindowManager manager = (WindowManager) context.g

js获取浏览器和设备相关width(屏幕的宽度)

首先呢,我们将iPhone手机的相关数据表示如下 我们要理解很多东西,比如逻辑分辨率.物理分辨率.缩放因子.ppi等,这里先不讨论. 首先呢,我们先介绍下各个屏幕宽度: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽:

js网页如何获取手机屏幕宽度

function a(){"屏幕宽高为:"+screen.width+"*"+screen.height:}其它:网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWidth (包括边线的宽) 网页可见区域高:document.body.offsetHeight (包括边线的宽) 网页正文全文宽:document.body.scrollWidth 网页正文全文高:document.body.scrollHeight 网页被卷去的高:document.body.scr