让你的网站支持Retina

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

普通网站/网页

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

首先在页面底部</body>之前，调用脚本：

<script src="/scripts/retina.js" type="text/javascript"></script>

如果你有图片，形如：

<img src="/images/my_image.png" alt="" />

当是 Retina 屏时，图片会被脚本自动替换为以下，当然前提是你传了 @2x 的图片：

<img src="/images/my_image@2x.png" />

行了，搞定。如果你想了解更详细的配置方法，可以到 Retinajs 官网，里面有很详细的说明，操作也非常简单。 Retinajs 官网：http://retinajs.com Retinajs Github：https://github.com/imulus/retinajs （这里有更详细的配置说明）

---

WordPress

这个就简单啦，推荐使用“WP Retina 2x”的WP插件，在“安装插件”中直接搜索“WP Retina 2x” 插件网站：https://wordpress.org/plugins/wp-retina-2x/

---

更新 2014-11-05

内容图片在CDN上，Retinajs和插件不生效

我也是后来才发现这个问题。在之前的 WordPress提速方案 说过，我的WP使用了七牛云，所以内容图片都会被同步到云上，通过CDN加速。可是这样的话，js就没法取到@2x图片，也就没法实现内容图片的retina效果。我折腾了两天，开始还以为是配置有问题，后来官网上看也有人提到类似问题，说还需要CDN服务商提供支持之类的……算了，我的更新量也不大，麻烦点能承受。 目前方案：“笨”方法 + Image-set “笨”方法指的是，所有内容图片直接上传@2x大小的图片，然后写死宽（width）高（height）。缺点是编辑时麻烦点，需要手动；优点是门槛低，易上手，而且只需要加载一张图，好管理，流量上其实比retinajs还少加载一张1x的。

<img src="/images/IMG_2014.jpg" width="1000" height="667" />

用 Image-set 来定义logo样式，这种不用经常变动的布局元素，用这种方法最好。

.site-logo { 
 background: url(images/logo.png) no-repeat 0 0;
 background-image: -webkit-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -moz-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -ms-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
 background-image: -o-image-set(url(images/logo.png) 1x, url(images/logo@2x.png) 2x);
}