iPhone屏幕尺寸和分辨率方面的一些小姿势

iPhone设备现在有多种分辨率,如下表所列,

设备屏幕尺寸分辨率(pt)Reader分辨率(px)渲染后PPI(DPI)
iPhone 3GS3.5寸320 x 480@1x320 x 480163
iPhone 4/4S3.5寸320 x 480@2x640 x 960326
iPhone 5/5S/5C4.0寸320 x 568@2x640 x 1136326
iPhone 6/6S4.7寸375 x 667@2x750 x 1334326
iPhone 6/6S Plus5.5寸414 x 736@3x1242 x 22081080 x 1920401

刚开始看见上面的表格时候,我有三个疑问,

  1. DPI和PPI是什么意思?

  2. pt和px是有什么不同?

  3. iPhone 6/6s Plus分辨率是1242 x 2208,为何渲染后分辨率变为1080 x 1920?

针对以上三个问题,我遵循内事不决问百度,外事布局问谷歌的原则,在网上找了一些答案,以下是简单的解答。

1. DPI和PPI是什么鬼?

DPI(Dots Per Inch)最初用于衡量打印无上每英寸的点数密度,就是说你的打印机可以在一英寸内打多少个点。DPI值越小,图片越不惊喜。

当DPI的概念用在计算机屏幕上时候,就应该称之为PPI(Pixels Per Inch)。同理:PPI就是计算机屏幕上每英寸可以显示的像素点的数量。

Windows系统默认PPI是96,Mac OS系统默认PPI是72.一般费视网膜屏幕的桌面电脑的PPI在72到120之间,使用72到120之间的PPI进行设计基本可以保证你的作品在大多数情况下看起来都差不多。

举个栗子来说:27寸Mac的PPI是109,也就是每英寸有109个像素。显示器宽度(含边框)为25.7英寸,屏幕纯宽度差不多是23.5英寸,所以23.5 x 109 = 2560,由此可见屏幕的分辨率为2560 x 1440px。

视网膜屏幕与PPI:视网膜屏幕是在iPhone4发布时进入大众视野的,叫视网膜是因为屏幕的PPI高到人的肉眼无法看到像素点。从技术上来说就是他们在物理尺寸与上一代相同的屏幕上塞了2倍的像素,如下图所示,


这种情况下,不苏傲笑元素的大小,相同尺寸屏幕上的元素精度提高了2倍。原来一个像素的空间现在有4个像素,像素是原来的4倍。

iPhone 4采用Retina显示屏,在物理尺寸不变的情况下,像素成倍增加,达到了640 x 960像素。这样就出现了一个问题,怎样让原有的App运行在新的手机上面?为了运行之前的App,苹果公司引入了一个新的概念point(点),点这个概念在iOS开发中十分重要,而开发者很少关注。iPhone 4屏幕尺寸继续保持320 x 480,不过单位并非是像素,而是点。

在iPhone 3GS中,一个点等于一个像素,也就是说点跟像素可以直接互换;在iPhone 4中,一个点等于两个像素;在iPhone 6 Plus中,一个点等于3个像素。

iPhone 4和iPhone 3GS的屏幕尺寸实际上是一样的,都是3.5英寸。同样一个点,实际上看起来是一样的,只是iPhone 4在单位英寸上像素更多,看起来更加细腻。

2. pt和px有什么不同?

pt(Point)代表点,px(Piexl)表示像素,这是两个看起来很像、却完全不一样的单位,在某些场合它们是1:1的,在很多时候却常常被搞混,或是制作过程根本没有分清楚、导致结果不准确。在绘图软件里面可以看到基本单位设定里面就有这两个选择,


px,即是pixel,表示像素。是屏幕上所显示的最小单位,在分辨率高的屏幕上,一个像素可能会达到肉眼无法识别的大小,


pt,即是point,是一个标准的长度单位,定义上1pt = 1/72英寸,英雌他跟我们所熟悉的公分、公尺一样,可以明确的指出1pt的长度是多少,


pt也是常见的标识文字尺寸的单位,在绘图以及文书软件等几乎都是使用pt作为字体标尺的单位,故一般称呼[字级]时候,通常即是指pt。

pt和px理解青睐其实并不难,在应用的时候也相当单纯,在大部分的情况下适用的一个理论是:当设计的目的是用于供屏幕浏览,则趋向于使用px以方便掌握细节;而如果是为了做输出打印的需求,使用pt则是较好的选择。

在iPhone 3GS时代,分辨率和点是1:1,到了iPhone 4,分辨率和点是2:1的关系,而在iPhone 6 Plus设备上,分辨率和点事3:1,所以为了方便开发人员开发,iOS中统一使用点(Point)对界面元素的大小进行描述,这样分辨率的差异对于开发者来说就不是问题了,在开发层面来说,开发者无需进行分辨率和点的单位换算,完全感觉不到点和分辨率的差异。

当我们说一个iPhone设备的分辨率时候,实际上我们是用的pt(点)作为描述分辨率的单位;当我们和UI讨论图片的尺寸时候,实际说的是px(像素)来作为描述图片的单位。

3. iPhone 6/6s Plus分辨率是1242 x 2208,为何渲染后分辨率变为1080 x 1920?

iPhone 6 Plus除外,其他所有iPhone的PPI是一致的,都是326,用@2x素材。

但是iPhone 6 Plus的实际PPI是401,理论上苹果应该用401 / 326 x @2x = @2.46x的素材,但是这个奇葩的臂力对于开发者而言很难切图,所以苹果为了方便开发者就采用了@3x的素材,然后再缩放到@2.46x的屏幕上,也就是缩放到2.46 / 3 = 83%,实际上苹果选取了一个接近比例的87%。这样算下来,物理分辨率和虚拟分辨率的比率是87%,也就是1080 / 0.86 = 1242,1920 / 0.87 = 2208。好处是开发者更方便,比如准备素材时候,字号可以直接调整为3x的。

让我们再来看一下不同iPhone设备的分辨率和像素的对照表,

手机ptpxPPI(DPI)
iPhone 4/4S/5/5S/5C/61020326
iPhone 6/6S Plus1030401

对于iPhone 6 Plus之前的手机,pt和px的比例是1:2,而iPhone 6 Plus出来之后,这一比例达到了1:3,同时分辨率达到了1242 x 2208(使用iPhone 6 Plus截屏,再上传到电脑看,就是这个分辨率),而iPhone 6 Plus实际分辨率为1080 x 1920,分辨率的比率为1.15:1。对于ppi,iPhone 6 Plus之前均为326,而之后变为401。

素材资源发生的变化@3x,在实际开发中,素材通常是UI美眉负责提供,从@2x到@3x,素材的分辨率提高了1.5倍,例如一个@2x的素材大小为44x44,那么响应的@3x大小分辨率为66x66,文件命名的方式依然没变,$(IMG_NAME)@3x.png,命名好的文件丢入资源文件夹内,只要代码报纸一直,文件名称不变即可。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值