移动开发中尺寸相关的概念梳理

背景

做移动App开发的同学,应该都被分辨率相关的概念或适配问题困扰过。甚至于设计人员,面对技术提到的dp,dip,sp等词汇时,也许也要懵上一会。在此,对开发中常用的一些概念做一个梳理。

基础概念

  1. 英寸(inch)

是英制的长度单位,1inch=2.54cm
我们通常用英寸来描述手机屏幕的尺寸。如iPhone6屏幕尺寸为4.7英寸,iPhone 6 Plus屏幕尺寸为5.5英寸,指的是显示屏对角线的长度。如下图:


iPhone部分屏幕尺寸示意
  1. 像素(Pixel)

百科上给的定义,指基本原色素及其灰度。可以理解为屏幕上的一个最小物理显示单位。无论代码里使用哪一种单位,最终都要转化为像素单位,并显示出来。

  1. 屏幕像素密度 ppi(Pixels Per Inch)

由它的名称可以看出,ppi指每英寸长度上含有的像素数目。只是这里的测量方式是沿着对角线的。

那ppi怎么算出来呢?其实就是很简单的一个勾股定理公式:


ppi 计算公式

举个例子,iPhone 5的分辨率是640px*1136px, 屏幕为4inch,代入上述公式可得到ppi=326。

  1. dpi(Dot Per Inch)

dpi指每英寸有多少个点。对手机、平板屏幕来说,dpi=ppi

iOS中的尺寸单位

pt 即point,是iOS里绘图时坐标系使用的抽象单位。我们应该把它和排版印刷中的point单位区别开来。

  • iPhone 3GS手机的逻辑分辨率是320pt *480 pt,屏幕的实际物理分辨率是320px * 480px,所以1pt刚好对应1px;

  • 到了iPhone 4,苹果采用了Retina的显示技术,逻辑分辨率仍然是320pt * 480 pt,物理分辨率变成了640px * 960px (326ppi), 意味着1pt会被渲染为2*2的像素矩阵。如下示意图:


    显示对比
  • iOS中的scale(缩放因子),阐述了pt与px之间的一个映射关系:

1 point = scale * pixel

(3GS的scale=1, iPhone4、5、6的scale=2, iPhone 6 Plus的scale = 3)

对于iPhone 6 Plus机型,逻辑分辨率选用了414pt * 736pt,按照scale=3来计算,完美1:1映射的设备物理分辨率应该是1242px * 2208px。但实际上手机的物理分辨率没有那么大(1080px * 1920px),个中缘由我们就不探讨了,对开发者来说,就按照@3x来准备素材,剩下的工作由渲染时自动压缩完成。具体可参考如下链接中的一张示意图 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

Android中的尺寸单位

大家都知道Android生态圈内的设备碎片化比较严重,出现了各种分辨率的屏幕。如果按屏幕密度(即ppi)来划分,广义上可以分为四种大小:低(120ppi)、中(160ppi)、高(240ppi)和超高(320ppi)。

  • dp,也叫dip,Density-independent Pixels的简写,字面意思就是密度无关的像素单位。dp是基于屏幕密度的一个抽象单位,这点上跟iOS里的pt本质上其实是一样的。Android引入这个概念,也就是为了解决在不同ppi的设备上,能够得到相同的显示效果。

之前我们讲到,任何单位显示时都要转化为像素Pixel。那么dp和px的换算关系是怎样的呢?

px=dp*ppi/160

即在160ppi的屏幕上,1dp=1px;而320ppi的屏幕上,1dp=2px,可以理解为1dp的单位将以2个像素来渲染。

屏幕密度(ppi) dp px
mdpi(160ppi) 1 1
hdpi(240ppi) 1 1.5
xhdpi(320ppi) 1 2
xxhdpi(480ppi) 1 3
  • sp,Scale-independent Pixels,是google建议的对字号使用的单位,比如在TextView里。为什么有了dp,还要引入sp呢?因为Android允许用户在“设置"里自定义文字尺寸大小(比如小,标准,大,超大,特大)。如果App功能上需要和系统这里的字号设置有联动关系,那使用sp就有意义了。实际开发中,如果没有这个必要,字号的地方使用dp也是没问题的。

以上简单总结了iOS和Android实际开发中的尺寸单位的概念。有不正之处,欢迎指正。

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

推荐阅读更多精彩内容