移动端适配(三)

72 阅读2分钟

「这是我参与2022首次更文挑战的第16天,活动详情查看:2022首次更文挑战」。

打工人迎来了2022年第一个双休日,这就是快落
依旧是老风格,上干货

回顾

先来回顾一下之前介绍过的知识点,前两篇我们介绍了像素、屏幕分辨率、图像分辨率、PPI等等。

接下来我们开始设备独立像素

一、设备独立像素

之前描述的都是物理像素,也就是我们真实的物理单元。

现在我们来事研究设备独立像素是如何产生的

几年之前,我们还在使用分辨率非常低的手机,但是随着智能手机的发展,不久,高分辨率的手机就开始出现了。比如,下面的白色手机分辨率是320x480,黑色手机的分辨率是640x940,正好是白色手机的2倍。

image.png

理论上来说,同一张图片在白色手机上展示正常大小,在黑色手机上则会缩小一倍。原因是黑色手机的分辨率放大了一倍。那这样一来,以后只要出现更高分辨率的手机,图片就会越来越小吗?

答案是当然不能,我们现在使用的智能手机,不管分辨率多高,内容所展示的大小也是相似的。

这就跟我们苹果的创始人乔布斯又关了,乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念,它正是解决了上面的问题,这也使它成为一款跨时代的手机。

iPhone4使用的视网膜屏幕中,把2x2个像素当1个像素使用,这样让屏幕看起来更精致,但是元素的大小却不会改变。如下图:

image.png

如果黑色手机使用了视网膜屏幕的技术,那么显示结果应该是,比如列表的宽度为300个像素,那么在一条水平线上,白色手机会用300个物理像素去渲染它,而黑色手机实际上会用600个物理像素去渲染它。

我们必须用一种单位来同时告诉不同分辨率的手机,它们在界面上显示元素的大小是多少,这个单位就是设备独立像素(Device Independent Pixels)简称DIPDP。上面我们说,列表的宽度为300个像素,实际上我们可以说:列表的宽度为300个设备独立像素。