高分屏下为什么要用二倍图

我的图片尺寸是 200 100 ，我让它在 html 中显示的长宽也是 200 100 ，这样不是刚好能完整显示吗？为什么说在高分屏下会觉得图片模糊需要使用二倍图呢？

先从硬件说起

一块显示屏从硬件上来说是由很多个可以发光的点组成的，一个点能呈现一个颜色，很多个点形成的面就构成了一幅图像。

显示器的物理像素分辨率就是指的横向和纵向有多少个发光点。

拿我自己电脑举例，在「关于本机-显示器」可以看到分辨率是 2560 * 1600 ，也就是指从物理层面讲横向有 2560 个像素点，纵向有 1600 个像素点，这个是固定值不会变的。

与物理像素分辨率对应的是逻辑像素分辨率。在「系统偏好设置-显示器」可以看到显示器默认的逻辑像素分辨率是 1440 * 900 ，你也可以调整为其它值。

为什么要有逻辑分辨率呢？

先想一个问题，我有一个图片文件，它在显示屏 A 上的尺寸是 500 * 349 ，在显示屏 B 上的尺寸会变吗？

当然不会 hhh ，在不同分辨率显示屏上它的尺寸参数都是这个值，并且在不同显示屏上如果不缩放，我们人眼看到的大小差别不会太大。

这里的尺寸其实就是指的逻辑像素尺寸了，表示横向 500 个逻辑像素纵向 349 个逻辑像素。

为什么不直接用物理像素呢？

因为不同显示器的分辨率差异会很大，直接用物理像素那同样的图片在不同显示器上看起来的大小差异也会很大。

来一段 MDN 上对 CSS像素的解释：

当使用单位 px 时，让 96px 的距离等同屏幕上的大约 1 英寸就合格了，无论屏幕的实际像素密度是多少。

可以试一下，在 HTML 中一个宽 200px 高 100px 的盒子，它在不同分辨率屏幕上显示出来的实际大小是差不多的（不会完全一样大，但是实际显示上的差异肯定不会有分辨率的差异那么大）。

所以我们可以理解为逻辑像素是一层软件层面上的抽象，我不用关心硬件，我只用知道 14px 的字看起来就那么大，在不同硬件上都会差不多那么大。

这样在物理像素分辨率很低和很高的显示器上，同一个界面能有差不多大小的展示，只是说显示的细腻程度不一样。

打开浏览器，打开控制台，输入 screen ，按下回车，发现宽高和上面的逻辑分辨率是一致的。

如果你将分辨率设为其它值， screen 的值也会跟着变化。

Window.devicePixelRatio 返回当前显示设备的物理像素分辨率与CSS像素分辨率之比。

如果说值是 1 ，那么逻辑像素分辨率和物理像素分辨率是一样的，这种时候并不存在说感觉图片糊的情况。

如果说值是 2 ，那么逻辑像素分辨率是物理像素分辨率 2 倍，在横向和纵向两个方向上，也就是说 1 个逻辑像素点现在会用 2 * 2 个物理像素点来显示。

那么当 200 100 的图片用 200 100px 去显示时，从物理像素点的层面来说就浪费了，因为有 2 * 2 个物理像素点去显示了同一个逻辑像素点，而其实还可以显示得更细腻。

所以这种时候我们要用 400 200 的图片放在 200 100px 的盒子里去显示，这样就可以 1 个物理像素对应 1 个逻辑像素了，使用十分充分。

当你在高分屏下进行了两种显示对比后，你自然会感觉 1x 图是糊的。

”糊“这个问题，除了图片以外，如果界面上有 canvas ，也是需要做额外处理的。