屏幕尺寸、像素、分辨率和 devicePixelRatio

时间:2024-02-24 13:52:43

目录

引子

最开始写页面的时候,对页面里面的 px 还是蛮好奇的,电脑上的分辨率好像正好跟页面渲染的宽度值对应,但手机里面却不是这样的,记得当时还去找了相关资料,好像知道是怎么回事。最近脑海里再次想起了这个问题,但已经不知道该如何表述,又没有相关的笔记,这个觉得有必要区分一下相关的概念。

屏幕尺寸

屏幕尺寸是指屏幕对角线的尺寸,经常看到的描述是英寸(缩写 in),1 in = 2.54 cm 。

screen-inch

像素

像素是屏幕上图像显示的最小可控元件,它不是一个点或者一个方块,而是一个抽象的取样。每个像素都有颜色,颜色通常用 3 或 4 个分量表示,例如 RGB 方法用红、绿、蓝三原色的光学强度表示一种颜色,CMYK 方法用青、品红、黄、黑四种颜料含量来表示一种颜色,CMYK 色域在印刷行业和打印机常见。

一个像素通常被认为是数字图像中的最小单位。在不同的上下文中,像素的含义可能不同,例如视频中的像素,打印时的像素,显示屏的像素,或者数码相机(感光元素)中的像素。根据语境的不同,会有一些更为精确的同义词,例如取样点,字节,比特,超集,斑等等。

设备像素

设备像素是指设备中使用的真实像素,也叫物理像素。在同一设备中,像素的总数是固定的。

像素密度PPI和DPI

PPI(pixels per inch)是指每英寸的像素数目,常用于度量计算机显示设备像素密度。

DPI(dots per inch)是指每英寸数码印刷的点数,用于度量印刷行业的空间点的密度。

理论上,PPI 是可以通过已知的对角线尺寸和屏幕分辨率计算出来。可以通过下面的公式计算:

screen-inch

  • w 是水平方向上的像素数
  • h 是垂直方向上的像素数
  • d 是屏幕尺寸

例如 21 英寸屏幕,分辨率为 1920*1680 ,那么 w=1920 ,h=1680 ,d=21 ,带入计算的 PPI=121.49 。

CSS 像素

CSS 像素是编程中的概念,用于逻辑上衡量像素的单位。

分辨率

分辨率(Image resolution)泛指量测或显示系统对细节的分辨能力。从不同方面描述,有像素分辨率、空间分辨率、光谱分辨率和时间分辨率。平常接触大部分是像素分辨率,例如常说的视频分辨率、显示分辨率和图形分辨率。这里暂只讨论像素分辨率类别。其它类型的相关介绍在这里

屏幕分辨率

屏幕分辨率是屏幕显示的像素总数,再细分一下就有:物理分辨率和显示器分辨率。

  • 物理分辨率是显示器的固有参数,不能调节,一般是指屏幕的最高可显示的像素数。
  • 显示器分辨率就是操作系统设定的分辨率。在显示器分辨率和物理分辨率一致时,显示效果才是最佳的,一般推荐设置的分辨率就是物理分辨率。系统设置分辨率生效是通过算法进行了转换。

举个例子,在手机上的看关于手机信息,可以看到分辨率信息为 720*1280 ,意思就是屏幕水平方向上有 720 个像素,垂直方向上有 1280 个像素。

图像分辨率

图像分辨率就是单位英寸中所包含的像素总数。图像分辨率的表达方式也为“水平像素数×垂直像素数”。例如一张图片的分辨率是 320*289 ,意思就是图片水平方向上有 320 个像素,垂直方向上有 289 个像素。

devicePixelRatio

这里是指 Javascript 中的 window.devicePixelRatio ,它是设备上物理像素和设备独立像素(device-independent pixel,dips,dp)比值。用公式表达就是:devicePixelRatio = 物理像素 / 设备独立像素。这个也可以解释为 CSS 像素和物理像素的比例,简单来说,它告诉浏览器需要多少物理像素来绘制一个 CSS 像素。这个属性可以用来区分视网膜设备和非视网膜设备。

设备独立像素也叫逻辑像素,是一种基于计算机坐标系统的物理测量单位,应用程序将独立像素告诉系统,系统再将设备独立像素转换为物理像素。以设备独立像素定义的尺寸,不管屏幕的参数如何,都能以合适的大小显示。在 IOS 视网膜设备上,screen.width 返回就是 dips ,Andioid 设备上 screen.width 的不一定是 dips 。

参考资料