利用H5实现自动选择二倍图、三倍图

前言

为了更明显地看出效果，三种情况下的图片用不一样的图片来搞。

picture + -webkit-min-device-pixel-ratio

用picture标签来提供source和img。并在source标签的media属性中设置条件，类似于媒体查询。-webkit-device-pixel-ratio表示设备像素比（设备像素 / CSS像素）。

一倍图：当这个比率为1:1时，使用1个设备像素显示1个CSS像素。
二倍图：当这个比率为2:1时，使用4个设备像素显示1个CSS像素，
三倍图：当这个比率为3:1时，使用9个设备像素显示1个CSS像素

<picture>
  <source srcset="./imgs/3x.jpg" media="(-webkit-min-device-pixel-ratio: 3)" />
  <source srcset="./imgs/2x.jpg" media="(-webkit-min-device-pixel-ratio: 2)" />
  <img src="./imgs/1x.jpg" alt="1x" />
</picture>

在公司的效果更明显，普通显示屏一倍图，mac二倍图，苹果手机三倍图。写这个博客，只能用Chrome来模拟出来。

window（一倍图）

iphone 6/7/8（二倍图）

iphone 12 pro（三倍图）

picture + resolution

-webkit-min-device-pixel-ratio是非标准的。mdn也表示它是resolution的替代方案。

resolution表示设备像素密度的值，当它的单位是dppx时，效果和dpr一样。（-webkit-min-device-pixel-ratio在语法中不允许单位，但是它的隐式单位是dppx）

<picture>
  <source srcset="./imgs/3x.jpg" media="(min-resolution: 3dppx)" />
  <source srcset="./imgs/2x.jpg" media="(min-resolution: 2dppx)" />
  <img src="./imgs/1x.jpg" alt="1x" />
</picture>

效果和上面一样

img srcset

最后的大招：img本身就可以支持自动选择三倍图、二倍图

srcset：一个包含单个或多个以逗号分隔的图像候选列表，表示在img里可以展示哪些图片。每个图像候选字符串由两部分组成，它们间以,分隔。第一部分是图像url，第二部分是条件描述符，表示什么环境下使用该图像。（类似于上面的media）

而要实现自动选择三倍图、二倍图，条件描述符就可以使用像素密度描述符，它指定了在什么样的显示器像素密度下应用相应的图像资源。简单来说就是跟dpr差不多。它由一个非零浮点值和小写字母x组成，如2x或2.0x。

<img srcset="
  ./imgs/3x.jpg 3x, 
  ./imgs/2x.jpg 2x, 
  ./imgs/1x.jpg 1x" 
  src="images.jpg" 
  alt="Image" 
/>

效果基本和上面一样。

有一点点不一样的是，picture在切换设备时，图片也是会变的。如window变成iphone 12 pro。但是，img的srcset则需要刷新才能看到效果。