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

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

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - retina高清图片处理及检测
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-1)

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

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

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - 模拟设备选项
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-2)

图片@2x/@3x

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

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

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

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - 高精度图片
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-3)

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

retina.js 切换高清

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

截至到发稿,retina.js最新版本是:2.1.2retina.js项目地址是:

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - github
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-4)

其核心代码是这样的:

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属性。

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - 代码删除map
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-5)

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

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

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

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

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - 代码测试结果2
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-6)

方式二:data-rjs定义路径

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

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

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - 代码测试结果1
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-7)

其它方式:

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

测试代码

<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>

苏南大叔:网页js如何检测高清屏?retina屏幕网页如何加载高清图片? - retina
网页js如何检测高清屏?retina屏幕网页如何加载高清图片?(图8-8)

相关文章

综述

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

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

助理微信

微信打赏码

微信公众号

微信小程序

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   js    retina