网页前端js如何检测高清屏？retina屏幕网页如何加载高清图片？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

随着科技的进步，现在很多电脑都是高清屏幕了。其中最有代表性的就是mac pro的retina屏幕，以及各种手机移动设备屏幕。对于网页编程来说，这也变成一个比较大的问题了。因为传统的网页1像素已经变成实际上的2像素，甚至3像素了。那么，对于网页前端程序员来说，就需要做出哪些改变呢？

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文讨论高清屏幕对于网页前端程序员编程的影响。本文测试环境：macpro@，chrome@101.0.4951.41，retinajs@2.1.2。

判断高清屏幕devicePixelRatio

window.devicePixelRatio

经过苏南大叔的测试：

• mac air@a1466，这个devicePixelRatio取值是1。
• mac pro@a1707，这个devicePixelRatio取值是2。
• ipad@a1474，这个devicePixelRatio取值是2。
• samsung@note8，这个devicePixelRatio取值是3.5。
• iphone@6s plus，这个devicePixelRatio取值是3。
• iphone@12 pro，这个devicePixelRatio取值是3。
• iphone@13 pro，这个devicePixelRatio取值是3。

可见，devicePixelRatio不为1的情况还是挺多的。对于这些设备，如果不对网页上的图片做特殊处理的话，则可能会发生图片相对较为模糊的情况。当然，如果您对于这种模糊的情况，不在意的话。那也大可不必大费周折对代码进行修改。

模拟devicePixelRatio

在chrome的f12里面的模拟设备功能里面，是可以模拟各种设备的，其中就包括devicePixelRatio这个选项。比如，添加新的设备的时候，除了传统的user agent string，还有device pixel ratio选项。
参考文章：

• https://newsn.net/say/chrome-user-agent-diy.html

图片@2x/@3x

如果您做过安卓程序，就会对里面的2x、3x等图片会非常熟悉。那么，对于高清屏幕来说，普通的网页图片会显得有些模糊。实际上需要对图片进行处理，才能获得更好的显示效果。

• 而2x图片，实际上就是普通的图片宽高*2。
• 同理，3x图片，实际上就是普通的图片宽高*3。

上述图片，虽然实际宽高加倍了，但是最终显示尺寸仍然是没有加倍前的尺寸。这样，就把2个像素压缩成1像素了。这个时候，高清屏想又把1像素展示为2个像素。就个时候，效果就叠加相消了，最终以正常的尺寸，然后获得一致的展示效果。

如果你使用sketch处理图片的话，这个是可以自动输出2x，3x图片的。对于photoshop，也是有插件可以自动生成2x，3x图片的。

• https://newsn.net/say/sketch-ico.html

retina.js 切换高清

但是对于html标签来说，目前是不支持定义多个图片地址的（安卓app是支持的）。那么，这里有个retina.js文件，可以读取img标签的自定义高清图片地址属性，用于替换高清屏下的普通图片地址。同时，还能保持原来的显示尺寸。

截至到发稿，retina.js最新版本是：2.1.2。retina.js项目地址是：

• https://github.com/strues/retinajs

其核心代码是这样的：

const rjs = img.getAttribute('data-rjs');
const rjsIsNumber: boolean = !isNaN(parseInt(rjs, 10));
if (rjsIsNumber) {
  dynamicSwapImage(img, src, rjs);
} else {
  manualSwapImage(img, src, rjs);
}

使用方式：
页面加载retina.js文件，注意删除文件尾部的.map文件的引用，否则可能会出现404请求。然后在img标签上加上自定义data-rjs属性。

方式一：data-rjs定义数字【推荐】

这里其实就是定义的devicePixelRatio值，这里的data-rjs实际上是个范围，比如定义了3，意思是你准备了两组图片，@2x和@3x。这里的问题就是：不能处理3.5的这种情况，被四舍五入了。

<img src="/images/my_image.png" data-rjs="3" />

这里使用方式，其实要求图片命名有规律，比如：test@2x.png、test@3x.png等。针对sansungnote8的3.5的情况，苏南大叔做了一个测试，匹配到的是4x的图。

方式二：data-rjs定义路径

属性还是这个属性，就是取值不是数字，而是普通的字符串了。这种情况下，图片的命名方式就不需要符合默认规律了。但是这种情况下，存在的问题是：所有的高清方案就只限制于同一个图片了，不能按不同设备做出不同处理。也是说个别情况下，还是存在着不清晰的状况。

<img src="/images/my_image.png" data-rjs="/images/2x/my-image.png" />

其它方式：

这里其实还有其它针对css里面的使用方式，比如：less、scss等针对background属性的使用方式。苏南大叔暂无这个需求，大家可以查看官方说明文件：

• https://github.com/strues/retinajs/blob/master/README.md

测试代码

<h2 id="span"></h2>
<script src="retina.js"></script>
<img src="img/test.png" data-rjs="4"> <br />
<img src="img/test.png" data-rjs="img/test@3.5x.png"> <br />
<script>
    var str = "devicePixelRatio：" + window.devicePixelRatio;
    document.getElementById("span").innerText = str;
</script>

相关文章

• https://newsn.net/say/remjs.html
• https://newsn.net/say/sketch-ico.html

综述

整体上来说，这个retina.js能解决一部分问题，但是显然问题只是部分被解决。两种已有的方式，都并不完美，都存在着一些问题。如果必须选择一种方式的话，个人可能偏向于定义数字类型。

更多js的相关代码经验文章，可以参考苏南大叔的文字：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。