如何让网站支持Retina屏幕
研究点儿技术问题还是挺花时间的。昨晚突发奇想，想起为本站增加retina支持（谁让我自己也用上rmbp了呢？）。结果一搜索，还真是比较麻烦的，简单说说吧。
基本原理
所谓Retina屏幕，其实就是在一定尺寸的屏幕内放进去了更多像素点，也就是分辨率更高，从而让图像看起来更清晰、锐利。操作系统（特别是Apple的MAC OS X）已经有非常好的支持，而且为了照顾字体大小（你不会愿意盯着个高清屏幕看芝麻大小的文字吧），一般将纵横各2个像素点当成1个来显示。但对图片采用同样的方法时，就会发现总有那么一点糊。而且如果你在RMBP上做截屏，直接放到网页上给普通屏幕电脑看，那图片又会变得离奇的大（准确的说是4倍，长宽各翻一番）。
所以，为了同时照顾retina和非retina屏幕，实际上我们需要不同大小的图片，只是让网页去判断究竟给读者呈现哪张。事实上，现在OS X和iOS上的App也是这样处理，会同时做Picture1.jpg和Picture1@2x.jpg两张图，其中@2x就是Apple的一个命名规则。
说回网页的问题，现在对retina的处理还没有一个标准，所以不同的浏览器有不同的处理方式。但多数浏览器通过window.devicePixelRatio的值来判断是否retina屏幕，最新的Safari、Chrome都支持CSS中-webkit-device-pixel-ratio和-webkit-min-device-pixel-ratio，此外W3C计划在HTML5中增加srcset特性（仍然是草案）。具体的情况可以参考这个WiKi页面。