历年iPhone屏幕密度高密度屏幕导致设备像素和

adnanhridoy2844

素之间首次分离。（图片来源：维基百科）（大预览）
当我们在移动设备上调整大小时，我们根据 CSS 像素进行测量，而不是根据设备像素。总结：

CSS 像素是逻辑像素。
设备像素是真实的物理像素。
高密度屏幕比较
1 个 CSS 像素可能超过 1 个设备像素。（大预览）
好的，但是桌面设备呢？它们仍然使用 手机号数据库列表 相同的旧像素计算吗？我们来谈谈这个吧。

2021 年桌面屏幕
几年后，高密度屏幕出现在笔记本电脑上。2014 年的 MacBook 配备了第一款“视网膜”屏幕（视网膜是高密度的代名词）。

如今，大多数笔记本电脑都配备了高密度屏幕。

让我们考虑一下MacBook：

13.3英寸 MacBook Pro 的屏幕为2560像素宽，但其行为却像1440像素一样。这意味着每个1.778物理像素都像逻辑像素一样工作1。
16 英寸 MacBook Pro 的屏幕为3072像素宽，但其行为却像1792像素一样。这意味着每个1.714物理像素都像逻辑像素一样工作1。
内置视网膜显示屏，16英寸，3072×1920像素
（大预览）
在PC笔记本电脑中，我测试了两台15.6英寸屏幕，一台为全高清分辨率，另一台为4K分辨率。结果很有趣：

15.6英寸全高清屏幕的宽度为1920像素，但表现却像1536像素。这意味着每个1.25物理像素都像逻辑像素一样工作1。
15.6英寸 4K 屏幕的宽度为3840像素，但其表现却与1536像素相同。这意味着每个2.5物理像素都像逻辑像素一样工作1。
两块15.6英寸屏幕对比，左为全高清，右为4K，CSS分辨率均为1536×864像素
这些 PC 设备具有不同的分辨率，但 CSS 分辨率的行为相同。（图片来源：Elad Shechter）（大预览）
正如您所看到的，真实物理（即设备）像素和CSS（即逻辑）像素之间的联系几乎消失了。

这些年来屏幕变得越来越密集
过去，如果您仔细观察屏幕，您实际上可以看到它的像素。随着屏幕技术的进步，制造商开始制造更高密度的屏幕。

屏幕上显示设备像素的图像特写
过去，如果您距离屏幕足够近，您就可以看到设备像素。（大预览）
推荐阅读：可折叠网络实际上意味着什么？

为什么我们计算逻辑像素的方式不同？
多年来，随着屏幕变得越来越密集，我们无法仅仅因为屏幕具有更多像素而在相同的屏幕尺寸中容纳更多内容。