如何让网站支持Retina屏幕

研究点儿技术问题还是挺花时间的。昨晚突发奇想,想起为本站增加retina支持(谁让我自己也用上rmbp了呢?)。结果一搜索,还真是比较麻烦的,简单说说吧。

基本原理

所谓Retina屏幕,其实就是在一定尺寸的屏幕内放进去了更多像素点,也就是分辨率更高,从而让图像看起来更清晰、锐利。操作系统(特别是Apple的MAC OS X)已经有非常好的支持,而且为了照顾字体大小(你不会愿意盯着个高清屏幕看芝麻大小的文字吧),一般将纵横各2个像素点当成1个来显示。但对图片采用同样的方法时,就会发现总有那么一点糊。而且如果你在RMBP上做截屏,直接放到网页上给普通屏幕电脑看,那图片又会变得离奇的大(准确的说是4倍,长宽各翻一番)。

所以,为了同时照顾retina和非retina屏幕,实际上我们需要不同大小的图片,只是让网页去判断究竟给读者呈现哪张。事实上,现在OS X和iOS上的App也是这样处理,会同时做Picture1.jpgPicture1@2x.jpg两张图,其中@2x就是Apple的一个命名规则。

说回网页的问题,现在对retina的处理还没有一个标准,所以不同的浏览器有不同的处理方式。但多数浏览器通过window.devicePixelRatio的值来判断是否retina屏幕,最新的Safari、Chrome都支持CSS中-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio,此外W3C计划在HTML5中增加srcset特性(仍然是草案)。具体的情况可以参考这个WiKi页面

阅读全文