屏幕适配原理解析

        想写这篇文章很久了,一直手懒,不爱整理,毕竟这块内容非常枯燥,其实核心原理是比较简单的,单是因为涉及的常用尺寸比较多,所以还是有必要死记的(总不能每次都从头计算一遍吧!)。

        刚开始学习UI得时候不熟悉安卓和iOS屏幕适配,曾经在网上做了大量的资料搜集,但是没有一篇可以讲通彻的,于是自己从屏幕工作原理开始研究起,整理网上查到的资料,最终掌握安卓和iOS的适配,同时还了解到PC和MAC屏幕的区别(原理相通)。

        温馨提示!本文相当枯燥晦涩,不具有权威专业性,只是个人理解。只讲适配原理,不讲设计规范!

        下面这句话已经翻烂了:由于安卓系统的开源特性,导致各大手机厂商推出了由自己设定的尺寸的屏幕,这就是屏幕的碎片化;同样iOS也在其不断更新迭代中,不断产生新的尺寸的屏幕出来。如下图:

数据来自友盟,图中每一个方块都代表一块不同比例的屏幕
数据来自友盟,每一个方框代表一块统一倍率下不同分辨率的屏幕

        这种现象增加了用户选择多样性,促进了消费,但是对APP的设计开发人员造成了不小的麻烦,要知道手机只是承载获取信息的工具,内容才是主导消费的中坚力量。如果没有一个合适的解决办法,app设计师和工程师就需要对每一种屏幕都进行适配,这是相当消耗人力物力的。好在,人类是伟大的。

一、名词解释

先来熟悉一下我们会用到的单位和名词:

像素

像素是图像元素的简称,英文Pixel来自picture+Element的组合(另外一种说法是picture cell),像素没有单位,或者说像素的单位是“个”,也可以说像素本身就是一个单位,下面会讲。

一、物理意义:

        屏幕中显示图像的最小发光单位,(oled屏幕)一个像素体由三个发光二极管构成,分别发出红光、绿光、蓝光,具有物理体积。

        像素体的大小不直接用体积或所占面积来表示,而是用比较宏观的单位 “分辨率,即:单位物理尺寸内所含的像素数量” 来描述相对大小。

        像素点不一定是正方形的,这跟不同的屏幕技术、色域等有关。如下图:

LCD屏微观照https://www.bilibili.com/video/av18010287/
AMOLED屏幕像素微观https://www.bilibili.com/video/av17119321/

插一段:随着技术的不断进步,像素点是可以继续缩小的,就是说屏幕的精度也将继续提高,LCD屏幕采用背发光,需要白色发光板来照亮带三种颜色的微小晶体,通过液晶层调节通光阀门,控制白光在单个晶体的通光亮,从而控制三种颜色色晶体的亮度,最终混合成我们所需要的图像颜色,这种屏幕的黑色是要耗电的深灰色,而不是纯黑;相比之下AMOLED屏幕就牛逼了,每个子像素都可以自己发光,自己关闭,因此它的黑就是真正的不通电,这就是AMOLED比LCD屏鲜亮轻薄省点的原因,不仅如此AMOLED的屏幕因为没有背光板和液晶层所以可以更薄,可以弯曲折叠,而不影响最终成像,这就是目前的曲面屏。

这根我们要讲的屏幕适配没有直接关系,只是你需要明确了解像素这个物理实体。

二、虚拟意义:

1.  屏幕中一张图片的像素大小是100x100px,说的是屏幕里这幅位图是由10000个色点 空间混合而成的,注意:这里的另一层含义是图片的像素大小是 虚拟量,是供计算机识别的单位。图片像素大小是描述图像尺寸的唯一因素,没有任何场景的情况下说一幅图片分辨率是72ppi或者300ppi都是完全错误的,分辨率将在下面讲到。参考https://www.jianshu.com/p/e7a53ac55454


远看


近看

稍微提一下,可能不完全正确:为什么说像素是描述图像尺寸的唯一因素,这要说到图片的来源--数码相机

数码相机通过感光元件CCD电荷耦合器件来接受镜头折射来的光线,我们常说2000万像素后置柔光双摄照亮你的美,就是说这台手机的CCD上有两千万个感光元件颗粒(也叫做像素),这个东西比屏幕上的像素更牛逼更细小,这就说的是摄像头的解析度,而不是分辨率(错误说法),因为每个颗粒只能记录一种颜色,所以通过这个元件生成的图像就有两千万个像素点生成,这种图像也叫做位图,每个元件摄取的颜色方块是可以无限放大的,所以位图可以无限放大缩小,没有固定的物理尺寸,但是放大后看到的是密密麻麻的小方格,离远了看就成了一幅图像,这涉及到眼睛的成像原理,艺术中也叫空间混合,有兴趣可以继续深究(我是懂了,不解释)。位图可以被细化像素数,也就是改变图像像素大小(ps就可以做)但是不会提高清晰度,因为相机已经决定了他的清晰度(包括通光亮、色值、像素数),现在谷歌AI算法可以通过卷积神经网络深度学习技术balabala来重新成像,极高的提高清晰度,不解释(我是懂了)。

2.  像素作为屏幕解析度的单位来使用,例如:

iPhone8的解析度为:750x1334px,意思就是iPhone8的屏幕上有750x1334=1000500个发光二极管(解析度下面讲)。

三、与其他基础单位的区别(px、pt、dp、sp)

pt与px

a.    Point 磅、点,缩写pt:描述字体大小的物理单位,用于印刷行业,1pt=1/72in。

插一段:Apple公司最初的Mac屏幕分辨率只有72ppi,所以Mac上显示的72px的图像就是1inch那么长,只不过苹果把px改成了pt(所以这里的pt是虚拟单位),与印刷行业保持一致(与当时市场环境有关);微软是个人电脑的先驱,最初将屏幕做成96ppi,就是说96px大小的图片显示出来就是1inch那么长,但是微软仍然使用px做虚拟单位;

b.    pt是iPhone屏幕的专用单位,这里的pt就不再是“磅”或“点”了。

初代iPhone 3GS的对角线为3.54inch,解析度为320x480px,分辨率为163ppi。Apple将该机型的屏幕分辨率定义为基准分辨率,因此在该机型上1px图像会显示的长度就是1/163inch,更丧心病狂的是,乔布斯将这个显示出来的1/163inch的长度定义为1pt(我就是牛逼你能拿我怎么样),也是用了pt这个字母做长度单位,因此在基准分辨率下的iPhone屏幕上1px=1/163in=1pt。(同理:安卓将初代安卓机型160ppi的屏幕上的1/160inch定义为1dp),所以以后在给iPhone标注一倍图的时候不要再用dp和px了,你要打的过开发小鸽鸽也行。

px是虚拟单位用来描述屏幕中图像的大小,是计算机识别单位,而inch是物理单位,用来描述人视线中的大小,只有在经过虚实匹配的标准电脑所显示的情况某种意义下才会保持数值一致(比如现在pc机的设置里有分辨率这一项,里面的推荐分辨率就是虚拟与现实一对一的像素对齐,讲到最后大家可以自己理解一下)

dp与px

为了保证相同的图片在不同分辨率的屏幕上显示的大小基本一致和清晰,微软、苹果、谷歌都提出了一个概念叫:与设备(密度)无关的像素(独立设备像素)Density(Device)- Independent Pixel,简称 DIP 或 DP,也叫逻辑像素。

仔细理解一下这句话“与设备无关的像素”,首先可以知道dp也被叫做像素,似乎跟px差不多;然后说“与设备无关”,这点就牛逼了,也就是说我不管在哪台设备上,不管是在window还是MacOs还是iOS还是Android的设备上,不管是大屏还是小屏,1dp都是一样的长,你看到的那么长。例如在iPhone上用尺子量是1cm的一个图片,放到pc机上还是1cm,要知道iPhone屏幕的精度是远高于pc机的好吧!

那这个单位是怎么想出来的呢?总不能就这么悬着没有一个标准吧!别急,且听老夫慢慢忽悠,我们下面会讲,这里需要大家记住dp的意义是:

“适配中控制变量,即保持最终显示图像的物理大小一致,dp是人为定义的实际的物理单位。“,移动设备中,dp和pt意义是一样的,只不过dp是安卓使用的,pt是iOS使用的,下面还会讲。

所以先记住:pt、dp和px是两种不同意义的单位,就像“米”和“个”。

sp与px

放大像素:Scaled Pixel简称sp,只用于描述字体的大小,基于基准分辨率来缩放的,也是一个中间单位,可以实现与dp一样的作用,但是其实质是不同的。(慢慢感受)

sp是与缩放无关的抽象像素(Scale-independent Pixel)。sp和dp很类似但唯一的区别是,Android系统允许用户自定义文字尺寸大小(小、正常、大、超大等等),当文字尺寸是“正常”时,1sp=1dp=0.00625英寸,而当文字尺寸是“大”或“超大”时,1sp>1dp=1英寸/160dp=0.00625英寸。类似我们在windows里调整字体尺寸以后的效果——窗口大小不变,只有文字大小改变。https://blog.csdn.net/aa971644/article/details/77583961就是说如果你字体使用dp做单位的话,用户就不能再设置中自行把字体放大(老年人使用手机就得放大几号)

解析度  Resolution

米尺的分段数,例如:

长度为1m的尺子平均分成10段,解析度就是10段;

1㎡的木板平均分成100格,解析度就是100格 ////(懵逼了吧!)

同理:我们常说iPhone8的屏幕分辨率为750x1334px,其实是指,iPhone8的屏幕解析度是750x1334px即1000500px,是指屏幕像素的个数。(国内常把解析度和分辨率都叫做分辨率。现在分辨率的使用真的非常混乱,我们只好将错就错)

分辨率 (密度、精度)

复合单位,解析度的倒数,也指单位刻度的长度,例如:

1m的尺子平均分成10段,分辨率就是10段/m,即每段0.1m;

2m的尺子平均分成10段,分辨率就是5段/m,即每段0.2m;

1㎡的木板平均分成100格,分辨率就是100格/㎡ ,即每格0.01㎡////(懵逼了吧!)

屏幕分辨率(Pixel density),即屏幕像素密度:Pixel Per Inch 简称 ppi(打印分辨率:Dot Per Inch 简称 dpi),为了不与现在的广泛说法冲突,下面的分辨率全称为屏幕像素密度。

屏幕上单位长度所含像素个数,想表达的是屏幕的显示精度,是联通现实与虚拟的桥梁,为什么不是单位面积内的像素数呢?因为算面积数值太大容易出错还很麻烦。

我们常说iPhone8的分辨率为:326ppi,指的是,iPhone8屏幕上每英寸分布约有326个像素点。

算法:计算屏幕对角线上像素的数量

简单来写就是:ppi=px/in

why?

为什么屏幕大小以对角线长度为标准? - 知乎https://www.zhihu.com/question/19640648

我的理解

1、为了屏幕多样性,这样屏幕长款是不受限制的,不然都做成方屏多简单;

2、前面提到像素点不一定就是方形的,反而不同尺寸的矩形子像素可以更好的将三原色平均分布到屏幕中,例如上面的AMOLED屏,因此造成长度上的分辨率和宽度上的分辨率不一致,两个数值都不能来描述屏幕像素密度,只有权重均值的对角线可以担此大任。

3、下面讲到的适配关系式也有助于理解。

英寸:inch

1inch=2.54cm  物理单位,用于有描述屏幕物理尺寸

为什么显示屏的大小用英寸而不是厘米衡量? - 知乎https://www.zhihu.com/question/20452297



二、原理剖析



1、设备无关像素:与设备或密度无关的像素(Density(Device)- Independent Pixel,简称DIP或者DP)

上面我们提到dp的意义是:

“适配中控制变量,即保持最终显示图像的物理大小一致,dp是人为定义的实际的物理单位。“

那么该问题主要解决同一幅图像在不同大小的屏幕上看起来一样大的问题。我们先说原理后举例(放大招了)


如上图:假设有两台不同屏幕大小和屏幕像素密度的手机A与B,屏幕像素密度分别是Appi与Bppi,显示出了同样大小的图片(边长为μin的正方形),

设图像在A手机中的边长为apx,B手机中的边长为bpx,(注意:这里就是体现px这个虚拟单位意义的时候,它指的是手机识别的图片大小,到后面你会知道这个值就是你为不同手机做设计时所需要的尺寸)

先称述一个事实;

根据:ppi=px/in 可得出如下关系式:

apx/Appi=bpx/Bppi=μin  ,变形可得:b/a=B/A,这里B/A就是两设备屏幕分辨率的比值α

如果已知A手机中的图片大小a,就可以知道B手机中图片的大小  b=a(B/A)  ∴ b=aα

这个事实其实已经解决了屏幕倍率的问题。如果我们知道两台设备的分辨率(上他的官网查找),和其中一台设备屏幕设计稿的大小,就可以确定另一台屏幕应该采用多大的设计稿。

例如:iphone3GS的屏幕像素密度为163ppi,iphone8的屏幕像素密度为326ppi,∴α=326/163=2,在3GS上有一个100px的方形按钮需要适配到iPhone8上,那么给iPhone8的设计尺寸就应该是100α=200,所以α就是我们说的倍率,

重点来了,上面我们已经提到

苹果将分辨率为163ppi的屏幕分辨率定为基准分辨率,即,在163ppi的屏幕中,1px=1pt=1/163in,

安卓将分辨率为160ppi的屏幕分辨率定为基准分辨率,即,在160ppi的屏幕中,1px=1dp=1/160in,

所以公式:b=a(B/A)就是核心原理了,变成我们需要的单位就是:PXb=DP(PPIb/PPIa),PPIb/PPIa就是屏幕间的倍率。

运用一下:

1:已知iPhone8的屏幕解析度是750x1334px,那逻辑像素是多少?

答:因为iphone8的屏幕像素密度是326ppi,是基准屏幕像素密度163ppi的两倍,所以逻辑像素=屏幕解析度➗2,最后得出逻辑像素是:375x667pt

2:已知Huawei P20的屏幕解析度为2248x1080px,屏幕尺寸为5.8inch,求屏幕宽度的逻辑像素是多少?

安卓并没有严格按照像素密度比例来作为倍率,而是规定了不同范围的密度属于何种倍率。

答:先根据屏幕像素密度计算方式,求得屏幕像素密度为430ppi(实际为428ppi,因为有刘海),参考安卓屏幕像素密度区间划分可知,该屏幕属于3倍屏XXHDPI,所以,该机型宽度的逻辑像素=1080/3=360dp。

OK,到这里pt和dp就完全具备了实际的物理意义,都叫做与设备无关的逻辑像素,二者的实际长度不一样,但是谈两者的长度没有意义,只能说明两家的第一代手机苹果的比安卓的分辨率高一点点而已,我们说了dp是与设备无关的像素,并不影响屏幕图像的清晰度,所以不要在意pt和dp的具体长度,除非有一天你建立了自己的移动系统帝国,你定为1/10000in都没关系,只要你不嫌麻烦。

插一段:有同学就问了,你不是说px是虚拟单位,dp是物理单位,两者不能混谈吗?是的,两者确实意义不一样,但是你要知道,px是可以看的见数的清的数量单位,而dp是人为约定的单位,就像为什么1m就是1m那么长,在m诞生前是没有衡量标准,同样,kg也是人为定义的质量单位,千克是一个实实在在的金属块,百年前科学家做了一块可以放置很久不会产生质量变化的金属玻璃罩内,以他的质量为标准定位1kg,直至今日仍然放在各国博物馆内,每年都会有人专门去测量该物体的质量是否发生了变化(已经确定该金属质量已经低于最初的数值),他决定着所有物体的质量数值变化(现在科学家识图采用量子技术重新定义各种基本单位,例如銫原子钟可保一秒的时间几亿年都不会变),同样谷歌公司这样约定在160ppi的屏幕上的1个像素长度就是1dp,1dp=1/160in。明白了吗?(呼,费劲)所以不要死磕为什么要这样定,我就这么定了你管得着吗?

回顾一下:

这就是屏幕的适配原理,嗯就酱,简单吧!


三、屏幕分辨率和系统分辨率如何影响图片的显示(装逼部分)



大家一定在windows系统上体验过这两个选项

根据我的理解:

第一个框“更改文本、应用等项目的大小”是系统分辨率(windows默认96ppi)

第二个框“分辨率”是模拟不同机型的屏幕解析度

讲一下(呱唧呱唧):

电脑在屏幕输出图像需要经过几个过程(纯属个人臆想):

计算机摄入图片,系统解析图像像素数据(像素数、色值等),系统将解析出的图片像素分发到屏幕中的像素点,最终屏幕呈现解析效果

所以这里有两个名词:系统分辨率和屏幕像素密度。

屏幕像素密度就是屏幕上的像素颗粒密度,而系统分辨率则是各系统自行规定的数值(其实就是逻辑分辨率),例如windows系统系统分辨率默认为96ppi,Mac系统默认系统分辨率为72ppi,不受任何物理因素的影响,完全是虚拟量。一开始上面在讲pt与px的时候已经提到了这一点,与当时的市场环境有关

假设有一台显示器屏幕中显示图片:

屏幕尺寸:Sin

屏幕解析度:Rpx

屏幕像素密度:Pdpi

图片像素大小:npx

图片显示大小:Fin

则有:

Pdpi=  Rpx / Sin  (屏幕解析度对屏幕像素密度的影响)

Fin=  npx / Pdpi (图片显示大小得出公式)

∴  Fin=  npx / (Rpx / Sin)

      =  (npx Sin) / Rpx

综上所述:当屏幕尺寸不变,屏幕解析度缩小时,屏幕显示的图像会放大,所对应的就是上图中的“分辨率”,只不过,这里的“分辨率”是系统模拟不同机型的屏幕解析度。

如何引入系统分辨率?系统分辨率是用来解析电脑语言的,例如电脑不知道1pt有多长,但是他可以决定在在这个长度上安排多少个像素,所以,我们将上面的图片改为文字(因为文字是用磅来计量的),通过系统的解析将系统分辨率带入函数。如下

系统分辨率:sdpi

文字显示大小:Fin

文字输入大小:Npt(point)

文字像素大小:npx

则有:

npx=(Npt / 72)sdpi  (求出了文字的像素大小)

∴  Fin=  (npx Sin) / Rpx

    =  (Npt sdpi Sin) / (72Rpx)

综上所述:当屏幕尺寸和解析度不变的情况下,系统分辨率越大,显示的图像越大,所对应的就是上面的缩放百分比。怎么理解,系统分辨率越高意味着可以将同一幅图像拆分成更多个像素点,比如,72ppi的系统分辨率解析1pt的文字,可以解析成1x1个像素点,那144ppi的系统分辨率就可把1pt的文字解析成2x2个像素点,因此提高后,同一幅图像占用了更多的像素点,即占用了更大的显示面积。所以显示的图像越大。

举个栗子🌰:

我有一台屏幕解析度为1600x1200px的显示器,想调成800x600的解析度,有两种办法:

1、调整设置中的“分辨率”为800x600px,这样,图像会用当前的屏幕像素一对一显示800x600的图像像素(现在的显示器会放大到屏幕最大高度,单击游戏设置中可以体验小屏视窗),图像缩小居中于屏幕显示出来;

2、调整“缩放”为200%,意味着系统分辨率提高了两倍,图像相应的放大了两倍,这种效果跟前一种的情况把显示区域放大到完整屏幕的效果是一致的,也就是仿真显示。

大概就这些,基本都逼逼完了,不知道大家可以理解多少。以上内容不具有专业性,本人也并非技术人员,如果有不正确的地方欢迎指出,彼此共勉。

感谢

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

推荐阅读更多精彩内容

  • 本文参考自: Google的官方权威适配文档 郭霖:Android官方提供的支持不同屏幕大小的全部方法 Storm...
    M悇芐冋忆阅读 12,775评论 5 56
  • 刚开始做移动端web开发的同学应该都碰到过页面适配问题,为什么我在开发手机上调试好的页面在其他手机会有这样或那样的...
    留七七阅读 19,283评论 5 80
  • 在我们学习如何进行屏幕适配之前,我们需要先了解下为什么Android需要进行屏幕适配。 由于Android系统的开...
    知青的叶阅读 1,482评论 0 2
  • 目录介绍 1.屏幕适配定义 2.相关重要的概念2.1 屏幕尺寸[物理尺寸]2.2 屏幕分辨率[px]2.3 屏幕像...
    杨充211阅读 1,526评论 0 1
  • 又是一年夏天,渐渐闷热的天气让人难受,这个时候的人们最希望的应该就是在家里开着空调,吃着西瓜,看着自己喜欢的书或剧...
    W晓晓阅读 435评论 0 1