让你的网站支持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);
}
让你的网站支持Retina

分享到朋友圈


1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*