屏幕尺寸、像素、分辨率和 devicePixelRatio，深入浅出，了解屏幕渲染的奥秘
2023-11-22 21:20:16
引子
最开始写页面的时候，对页面里面的 px 还是蛮好奇的，电脑上的分辨率好像正好跟页面渲染的宽度值对应，但手机里面却不一定。有时候遇到的屏幕像素密度比较高，设备上面的实际显示结果比页面渲染的要小，这其实是因为屏幕尺寸、像素、分辨率和 devicePixelRatio 这些概念影响了最终的显示结果。
屏幕尺寸
屏幕尺寸是指屏幕的对角线长度，单位是英寸 (inch)，通常用 "、" 符号表示。例如，一台 15.6 英寸的笔记本电脑屏幕，其对角线长度为 15.6 英寸。屏幕尺寸越大，显示面积越大，可以容纳更多内容。
像素
像素 (pixel) 是屏幕上最小的显示单位，由红、绿、蓝 (RGB) 三种基本颜色组成。像素的数量决定了屏幕的分辨率。例如，一个 1920 x 1080 分辨率的屏幕，其屏幕上共有 1920 × 1080 = 2,073,600 个像素。像素越多，屏幕的分辨率越高，显示的图像越清晰。
分辨率
分辨率是指屏幕上像素的数量，单位是像素/英寸 (PPI)。分辨率越高，屏幕显示的图像越清晰。例如，一台 15.6 英寸、1920 x 1080 分辨率的笔记本电脑屏幕，其分辨率为 1920 / 15.6 = 123 PPI。分辨率越高的屏幕，显示的图像越细腻。
devicePixelRatio
devicePixelRatio 是一个设备独立的像素密度值，它表示设备上一个物理像素所对应的 CSS 像素数量。例如，一台设备的 devicePixelRatio 为 2，则一个 CSS 像素在该设备上将被渲染成 2 个物理像素。devicePixelRatio 越大，屏幕的像素密度越高，显示的图像越清晰。
在网页设计和前端开发中，屏幕尺寸、像素、分辨率和 devicePixelRatio 是非常重要的概念。理解这些概念可以帮助我们更好地设计和开发出适合不同设备的网页和应用程序。
参考资料
