让你的网站支持Retina屏幕

Posted 2020-07-14 藏经阁

这个话题跟我刚刚换了支持 Retina 的笔记本有关。其实早有意识到，只是没 Retina 之前，认为这个工作是别人的事，毕竟现在支持“视网膜屏”的网站还是少数，但作为从业者，应该可以预见，未来3-5年，Retina 将会越来越普及，因为人们浏览网页的媒介正在发生巨大的变化，更多移动终端的介入，无疑会推动这一进程的发展。所以，早做准备，从现在开始，让你的网站支持 Retina！

普通网站/网页

方法有很多，但我发现最有效，也最方便的做法，就是利用 Retinajs ，原理也超简单，页面内调用 retina.js，比如你的图片叫 sample.png ，脚本会寻找同目录下是否有 [email protected] ，当屏幕是 Retina 时，脚本会自动切换成 @2x 的图片。如何操作：

首先在页面底部</body>之前，调用脚本：
<scripttype="text/javascript"src="/scripts/retina.js"></script>

如果你有图片，形如：
<imgsrc="/images/my_image.png"/>

当是 Retina 屏时，图片会被脚本自动替换为以下，当然前提是你传了 @2x 的图片：
<imgsrc="/images/[email protected]"/>

行了，搞定。如果你想了解更详细的配置方法，可以到 Retinajs 官网，里面有很详细的说明，操作也非常简单。

Retinajs 官网：http://retinajs.com
Retinajs Github：https://github.com/imulus/retinajs（这里有更详细的配置说明）

作者已经在一个项目中使用了，地址：http://www.jshop.com.cn，大家可以分别用普通显示屏跟Retina显示屏查看其中的差异。