iOS开发之尺寸(一):各种机型尺寸

导读

iOS 人机界面准则

以下就来说说各种机型对应的屏幕尺寸、点(Point)和像素点问题

屏幕相关知识点

屏幕尺寸

在显示器世界里,屏幕尺寸都是由屏幕对角线长度表示的,单位是英寸。比如iPhone4的3.5寸屏就意味着屏幕对角线的长度是3.5英寸。

单位换算如下:
1英寸(inch)=2.54厘米(cm)

分辨率

分辨率是任何一款手机产品最重要的参数之一。显示屏是由一个个像素组成的,分辨率可以简单理解成屏幕像素的数目。比如iPhone4的屏幕分辨率为640×960,就表示屏幕的横向有640个像素点,纵向有960个像素点。

PPI

PPI(Pixels Per Inch)表示单位面积上的像素点数目。分辨率可以表示屏幕包含的像素数目,但要想描述屏幕的显示质量,还需要知道屏幕尺寸,最后算出单位面积上的像素点数目。显然PPI越高,屏幕显示效果越细腻。

PPI计算公式:
这里写图片描述

其中,X:长度像素数;Y:宽度像素数;Z:屏幕尺寸即对角线长度

Points

为了方便开发人员开发,iOS中统一使用点(Point)对界面元素的大小进行描述

我们在开发的时候只需要把对应的屏幕当成苹果规定的点来开发就行了,具体每一个机型对应的点是多少,我们可以以下参见附表。

PS: 点和像素的换算关系如下
普通屏幕: 1个点 = 1个像素
Retina屏: 1个点 = 2个像素
当然还有1个点 = 3个像素的,这个具体的屏幕我忘了,可能是High Retina吧,反正看起来跟High Serria有点像!!!

可以简单理解成我们使用UIKit或 Core Animation处理界面元素时所用到的逻辑坐标系统。Points是在iOS4以后引入的,出现的目的是提供一种与设备无关的一致的输出效果。
苹果考虑到以后有可能推出不同分辨率屏幕的手机,如果开发者在界面布局的时候操纵像素,就会导致每种不同分辨率的设备都要有一份适配代码。比如在分辨率为320×480的iPhone3GS上,要画一条长度1英寸的线条,假设需要50个像素,即线条的长度设成50像素;但是在分辨率为640×960的iPhone4上,50像素所能表示的实际长度只有iPhone3GS的一半,即0.5英寸。因此开发者必须使用两套适配代码:在iPhone3GS上将线条长度设成50像素,在iPhone4上设成100像素。这还仅仅是两款设备,如果算上后来的iPhone5/5C/5S和iPhone6/6+,每种分辨率都来一套适配代码,开发者岂不是得疯掉??
现在苹果使用了一套逻辑坐标系统来解决多分辨率屏幕适配问题,将屏幕上的每一个点都用以屏幕左上角为原点,横向为X轴,纵向为Y轴的坐标来表示(PS:并不是所有的框架默认坐标系统都是这样,比如APPKit中的NSView;当然开发者也可以将UIKit和 Core Animation的坐标系统改成以屏幕左下角为原点,但原理都是一样的。)。以iPhone3GS/4为例,他们的坐标系统中X和Y的最大值都分别是320和480。
有了逻辑坐标系统,想在分辨率不同的iPhone3GS/4画一条长度均为1英寸的线条就变成了这样:将线的长度设成50Points(假设1英寸对应那么多个Points),UIKit在屏幕上绘图的时候会判断屏幕分辨率,如果是iPhone3GS的320×480分辨率屏幕,会自动使用50像素绘制;如果是iPhone4的640×960分辨率,会自动使用100像素绘制。
这种机制使得在4寸屏幕的iPhone5出来之前,iOS开发者在设备屏幕适配上的工作量几乎为零(当然,需要准备两套图片),对此Android同行们早就口水直下三千尺了。后来随着iPhone屏幕尺寸的变化,逻辑坐标系统的取值范围也发生了变化,这才让iOS开发者有点事情可做。

渲染比例(Scale)

像素点数目和逻辑坐标点数目的比值,就是渲染比例(Scale)。更直观的说法是一个逻辑坐标点,需要用几个像素点来渲染。
iPhone3GS的逻辑坐标系统是320×480,分辨率是320×480,即每个坐标点对应一个像素,即Scale为1;iPhone4的逻辑坐标系统是320×480,分辨率是640×960,每个坐标点对应两个像素点,即Scale为2。
因此,为了适配iPhone6+的屏幕,以后又得曾加一份@3x分辨率的图片了。

宽高比

屏幕宽度和高度的比例,也可以是分辨率的横向像素点数目和纵向像素点数目的比例,他们通常是一致的,一般用整数表示。
iPhone3GS/4/4S的宽高比2:3,iPhone5/5C/5S/6/6+的宽高比都是9:16。
当年iPhone5出来的时候,适配3.5寸屏幕的应用上下黑边的场景仍记忆犹新,用户体验很不好,虽然大部分应用都迅速的做了适配。还好苹果这次学聪明了,从4寸屏升级到iPhone6的4.7寸屏和iPhone6+的5.5寸屏,宽高比并没有变化。也就是说原来在iPhone5上运行的应用能够通过拉伸平滑过渡到iPhone6/6+上,可能会稍微有点模糊。不过比起3.5寸到4寸屏的升级来说已经好很多了。

附表:

机型 尺寸 点(Point)
iPhone4s 3.5英寸 320 * 480
iPhoneSE 4.0英寸 320 * 568
iPhone6 4.7英寸 375 * 667
iPhone6s 4.7英寸 375 * 667
iPhone7 4.7英寸 375 * 667
iPhone6P 5.5英寸 414 * 736
iPhone6sP 5.5英寸 414 * 736
iPhone7P 5.5英寸 414 * 736
iPadPro 9.7英寸 768 * 1024
iPadPro 12.9英寸 1024 * 1366
位置 点(Point)
statusBar (状态栏) 20
navigationBar(导航栏) 44
tabBar(这个就叫tabBar) 49
toolBar(工具栏) 44

代码:

// 竖屏时,返回的是不带有状态栏的Rect.横屏时,返回整个屏幕Rect
[UIScreen mainScreen].applicationFrame);

//The natural scale factor associated with the screen(自然比例因子)
[UIScreen mainScreen].scale);

//The native scale factor for the physical screen(本机比例因子)
[UIScreen mainScreen].nativeScale);

//Bounds of entire screen in points,带有状态栏
[UIScreen mainScreen].bounds);

//Native bounds of the physical screen in pixels
[UIScreen mainScreen].nativeBounds);

参考:
iOS 人机界面准则
macOS 人机界面准则
watchOS 人机界面准则
Apple TVOS 人机界面准则

IPHONE屏幕大小,分辨率解析
IOS 屏幕尺寸、分辨率、点之间的相互关系
(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

以上!!!

逗比.gif
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容