devicePixelRatio下的血泪
2023-09-20 06:44:14
又是一个阳光明媚、适合敲代码的日子。心情很好，所以工作进展神速。但生活就是这样，你永远不知道是下班先到还是bug先来。这不，刚哼着小调，测试就甩过来一个bug。测试发现滚动加载无效，我当时就…咳咳，说错了，像我这么英俊潇洒、玉树临风、才高八斗、学富五车的人怎么可能写bug嘛…
事情的起因是，我们有一个需求，需要在移动端开发一个滚动加载的图片列表。图片的质量要求很高，所以我们使用了高清图片。但是，在测试阶段，我们发现滚动加载无效。图片在滚动时不会加载。
我们排查了很多原因，包括网络问题、服务器问题和代码问题。但是，我们都没有找到问题所在。最后，我们终于发现了罪魁祸首：devicePixelRatio。
devicePixelRatio 是一个 CSS 媒体查询属性，它表示设备的物理像素与设备独立像素（CSS 像素）之间的比率。换句话说，devicePixelRatio 告诉浏览器设备的像素密度。
在高像素密度设备上，devicePixelRatio 的值会大于 1。例如，在 iPhone 6 上，devicePixelRatio 的值为 2。这意味着 iPhone 6 上的一个 CSS 像素实际上是两个物理像素。
当我们使用高清图片时，图片的物理尺寸会很大。但是，浏览器会根据 devicePixelRatio 的值来调整图片的显示尺寸。因此，在高像素密度设备上，图片会显示得更小。
这就是滚动加载无效的原因。当我们滚动页面时，浏览器会加载新的图片。但是，由于图片的物理尺寸很大，所以浏览器需要花更长时间来加载图片。因此，图片在滚动时不会加载。
为了解决这个问题，我们可以在 CSS 中使用 media 查询来针对高像素密度设备调整图片的显示尺寸。例如，我们可以使用以下 CSS 代码：
@media (min-device-pixel-ratio: 2) {
img {
width: 50%;
}
}
这样，在高像素密度设备上，图片的显示尺寸就会减半。图片的物理尺寸也会减半，所以浏览器加载图片所需的时间也会减半。
解决了滚动加载无效的问题后，我们又遇到了一个新的问题：图片质量下降。
由于我们使用了高清图片，所以图片的质量很高。但是，当我们使用 CSS 来调整图片的显示尺寸时，图片的质量也会下降。
为了解决这个问题，我们可以使用一些图片优化技术来提高图片的质量。例如，我们可以使用以下图片优化技术：
- 使用无损压缩格式（如 PNG 或 WebP）来压缩图片。
- 使用有损压缩格式（如 JPEG）来压缩图片，但要确保压缩率不要太高。
- 使用 CSS 的
image-rendering属性来调整图片的渲染方式。
通过使用这些图片优化技术，我们可以提高图片的质量，同时又不影响图片的显示尺寸。
最后，我们终于解决了devicePixelRatio引发的血案。我们不仅修复了滚动加载无效的问题，还提高了图片的质量。
通过这个案例，我们学到了很多东西。我们学到了devicePixelRatio的重要性，我们学到了如何针对高像素密度设备调整图片的显示尺寸，我们也学到了如何使用图片优化技术来提高图片的质量。
希望这篇文章能帮助到大家。
