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

news/2024/11/8 14:57:53/

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,命名好的文件丢入资源文件夹内,只要代码报纸一直,文件名称不变即可。


http://www.ppmy.cn/news/665120.html

相关文章

iphone6/6+ 适配心得

1. 文档综述 自iphone6/6发布,ios屏幕分辨率的种类一下从2种变成了四种。对于以前很多手写UI,并且使用绝对坐标的UI,可能会发生异变,本文主要介绍在纯手写UI条件下,ios应用界面适配的一些经验了。 2. iphone分…

vue-H5 移动端适配方案 rem

vue-H5 移动端适配方案 rem 在这里插入代码片(function (doc, win) { var docEl doc.documentElement, resizeEvt “onorientationchange” in window ? “onorientationchange” : “resize”, recalc function () { var clientWidth docEl.clientWidth; if (!clientWid…

HTML5移动端手机网站开发流程

最近一直在研究移动手机网站的开发,发现做手机网站没有想象中的那么难。为什么会这么说呢?我们试想下:我们连传统的PC网站都会做,难道连一个小小的手机网站难道都搞不定吗?其实手机网站就是一个微缩版的PC网站罢了!至于…

H5性能优化方案

H5性能优化意义 对于一个H5的产品,功能无疑很重要,但是性能同样是用户体验中不可或缺的一环。原本H5的渲染性能就不及native的app,如果不把性能优化做起来,将极大地影响用户使用产品的积极性。 用户感受 当用户能够在1-2秒内打…

HTML5学习

文章目录 autofocus自动聚焦语义化标签DOCTYPE声明metameta http-equivmeta charset的指定viewport移动端视口 不允许写结束标记的元素可以省略结束标记的标签属性值的简写废弃标签contenteditable规定元素内容是否可编辑hidden属性data-* 属性draggable拖拽属性dataTranfer数据…

android iphone字体,网站中的字体设置--兼容苹果、pc、安卓系统的字体设置

在网站设计制作中很多人会遇到一个问题:设计图和实际出来的网站的页面字体差别很大?苹果、pc、安卓以及各个浏览器显示都很不一样? 这要从网站设计各个职能的人说起了,平面设计师设计完后不管了,丢给前端工程师开发h5代码。而前端设计师做完后又丢给程序开发写后台程序………

如何做好云渗透测试的威胁建模(上)

NO.1 威胁建模相关定义 微软针对威胁建模(Threat modeling)的描述:威胁建模是帮助保护系统、应用程序、网络和服务的有效方法。这是一种工程技术,用于识别潜在的威胁和建议,以帮助降低风险并在开发生命周期的早期实现…

Vim 使用学习记录(1)

前言 在使用编辑器的时候依然存在很多不方便,Vim使用上手成本很高,但还是得学着用,此系列用来记录学习使用的Vim基本命令和用法 参考链接 zhihu 参考链接 博客 vim基本模式 vim的基本模式分为: 命令模式(Command Mo…