文档章节

详解 iPhone 6 Plus 的奇葩分辨率

 北方人在上海
发布于 2016/07/11 14:12
字数 970
阅读 142
收藏 1

2014-09-12 richardbao

@richardbao

 

现如今 iPhone 在尺寸上终于“百花齐放”了,有点向 Android 世界发展的趋势。至日前 Apple 发布 iPhone 6 和 iPhone 6 Plus 时,iPhone 家族有了如下五种不同的屏幕:

 

首先是以实际物理尺寸为准的相对大小,如下图绿色所示:

 

 

然而由于屏幕的实际像素密度(ppi)不同,如果按实际像素的数量来比较的话,得到的是下面的相对大小,如蓝色所示:

 

 

可以看到,第一代屏幕因为是非 Retina 的,虽然物理尺寸和 iPhone 4/4S 一样,但像素数量少得可怜。而最新发布的 iPhone 6 Plus 虽然设备尺寸比 iPhone 6 只是稍大,但实际像素却多了许多,不愧是 401ppi 的屏幕。

 

但是,这个 401ppi 的屏幕和之前的 326ppi 的 Retina 屏幕相比,大了不少,但又不够大。在 Retina 绘图系数上显得很尴尬。

 

比如说,我们在这个屏幕上继续使用 @2x 系数的 Retina,那么同样的一张照片应该显示如下:

 

 

此时,1080px 对应的逻辑像素是 540 pt @2x。当我们将其调整回真机物理尺寸的时候,会发现 iPhone 6 Plus 上的图反而变小了:

 

 

这样会导致一个尴尬的结果:用户拿着一个大屏手机,字却反而比小屏幕手机更小,更看不清楚。因此,@2x 不合适。

 

如果像之前传言的那样,改用 @3x 系数,那么同样的照片肯定显示得要大多了:

 

 

这回看是看清楚了,但逻辑像素则成了 360pt @3x,比 iPhone 6 的 375pt @2x 还要少。另一个尴尬的局面产生:用户拿着一个大屏的 iphone,看到的内容反而少了。

 

 

于是,@2x 和 @3x 都不太行得通。苹果肯定也这么纠结过。如果真的要等比例,应该是 @2.46x,但这个数字太坑了,无论是设计师还是开发人员都会疯掉:

 

 

于是,苹果给出了一个实在奇葩的方案(虽然想想也合理):不是现有的屏幕物理分辨率明显超过了 @2x 但还达不到 @3x 的水平么?那我们歪歪一个满足 @3x 的屏幕总可以吧?

 

对的,歪歪。

 

程序在 iPhone 6 Plus 上运行的时候,iOS 会骗它说,你运行在一个超大的 @3x Retina 显示屏上,物理分辨率高达 1242 x 2208,逻辑分辨率是 414 x 736,两者都比 iPhone 6 要大。然后作为设计师和开发人员,也跟着一起歪歪。设计师画图的时候要把屏幕当成 1242 x 2208 来画图(而且要提供 @3x 的高清图),开发人员也按照 414 x 736 的逻辑分辨率来写程序。

 

但借来的总要还的。等咱们歪歪结束了以后,iOS 拿到这个假大的 UI 绘制结果,实时地再缩小到实际的 1080 x 1920 分辨率。于是,用户在 iPhone 6 Plus 的屏幕上看到的永远是被缩小了的图像:

 

 

但是,这么做使得设计和开发的过程大大简化,且最后的实际缩放系数 @2.62x 非常接近理想的 @2.46x,使得同样的素材在真机上看起来尺寸也非常合理:

 

 

从左至右,同样大小的图片看起来物理尺寸差不多大,逻辑像素数量也逐渐增多(即能显示的内容越来越多)。

 

这么做的坏处当然也是有的,尤其对于设计师或者处女座的人,因为图像永远会被缩小 13%,于是除非 iOS 很可能永远无法精确地画出 1px 宽的线条了。。。

© 著作权归作者所有

粉丝 22
博文 187
码字总数 265578
作品 0
浦东
私信 提问
iPhone屏幕尺寸、分辨率及适配

1.iPhone尺寸规格 设备 iPhone 宽 Width 高 Height 对角线 Diagonal 逻辑分辨率(point) Scale Factor 设备分辨率(pixel) PPI 3GS 2.4 inches (62.1 mm) 4.5 inches (115.5 mm) 3.5-inch 320......

豆花饭烧土豆
2016/07/02
28
0
iPhone 6 / 6 Plus 设计·适配方案

iPhone 6 / 6 Plus 设计·适配方案 关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于And...

法斗斗
2016/01/04
44
0
移动端适配详解

  接触移动端网页已经有一段时间 了,一直希望找个机会好好地总结以下,但一直比较懒,所以才拖到了今天。   推荐网站:www.aol.com 响应式做的很好。   之前我写过一篇关于移动端布局...

张立达
2017/05/03
0
0
聊一聊移动web分辨率的那些事儿

欢迎大家收看聊一聊系列,这一套系列文章,可以帮助前端工程师们了解前端的方方面面(不仅仅是代码): http://my.oschina.net/MrHou/blog?catalog=477313&temp=1466755903794 1 PC到移动,渲...

侯禹
2016/06/24
373
1
iOS 8 最新测试版再次证明 iPhone 6屏幕像素翻三倍

开发者 James Thompson 发现了最新 iOS 8测试版中有趣的渲染操作,这也进一步增加了 iPhone 6 将使用全新分辨率的可信度,也就是将像素翻成三倍,目前的 Retina 显示屏将像素翻成两倍。很早之...

oschina
2014/08/30
4.4K
11

没有更多内容

加载失败,请刷新页面

加载更多

CSS--列表

一、列表标识项 list-style-type none:去掉标识项 disc:默认实心圆 circle:空心圆 squire:矩形 二、列表项图片 list-style-img: 取值:url(路径) 三、列表项位置 list-style-position:...

wytao1995
今天
8
0
linux 命令-文本比较comm、diff、patch

本文原创首发于公众号:编程三分钟 今天学了三个文本比较的命令分享给大家。 comm comm 命令比较相同的文本 $ cat charabc$ cat chardiffadc 比如,我有两个文件char和chardiff如上,...

编程三分钟
今天
9
0
QML教程

https://blog.csdn.net/qq_40194498/article/category/7580030 https://blog.csdn.net/LaineGates/article/details/50887765...

shzwork
今天
7
0
HA Cluster之5

对于使用heartbeat v2版的CRM配置的集群信息都是保存在一个名为cib.xml的配置文件中,存放在/var/lib/heartbeat/crm/下。CIB:Cluster Information Base,由于xml文件配置不是那么方便,所以...

lhdzw
今天
8
0
玩转Redis-Redis基础数据结构及核心命令

  《玩转Redis》系列文章主要讲述Redis的基础及中高级应用,文章基于Redis5.0.4+。本文主要讲述Redis的数据结构String,《玩转Redis-Redis基础数据结构及核心命令》相关操作命令为方便对比...

zxiaofan666
今天
11
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部