关于Retina

Device Pixels(设备像素)

一个设备像素（或者称为物理像素）是显示器上最小的物理显示单元。在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

PPI(pixels per inch)

屏幕密度指的是单位面积里物理像素的数量，通常以PPI(pixels per inch)为单位。苹果公司为它的双倍屏幕密度的显示器（double-density displays）创造了一个新词“Retina”，声称在正常的观看距离下，人眼无法在Retina显示器上分辨出单独的像素。

与设备无关的像素（DIPs,device-independent pixels）

CSS pixel是浏览器使用的抽象单位，用来精确的、统一的绘制网页内容。通常，CSS pixels被称为与设备无关的像素（DIPs,device-independent pixels）。在标准密度显示器（standard-density displays）上，1 CSS pixel对应一个物理像素。

物理像素与DIPs的比例

物理像素与CSS pixel 的比率可以通过媒体查询的device-pixel-ratio来检测（device-pixel-ratio兼容性）。也可以通过javascript的window.devicePixelRatio来获取该比率。

Bitmap Pixels（位图像素）

一个位图像素是栅格图像（也就是位图，png、jpg、gif等等）最小的数据单元。每一个位图像素都包含着该如何显示自己的信息，例如显示位置、颜色值等。一些图片格式还包含额外的数据，例如透明度。

除了自身的分辨率外，图片在网页上还有一个抽象的尺寸，通过CSS pixels来定义。浏览器在渲染的过程中，会根据图片的CSS高度和宽度来压缩或是拉伸图片。

当一个位图以原尺寸展示在标准密度显示器上时，一位图像素对应一个物理像素，就是无失真显示。而在Retina显示器上，为了保证同样的物理尺寸，需要用四倍的像素来展示，但由于单个位图像素已经无法再进一步分割，只能就近取色，导致图片变虚。

解决方案

HTML

img标签创建的时候，写上一倍大小的宽高。

CSS

通过background属性进行控制:

  1. .image {
  2.   background-image: url(example@2x.png);
  3.   background-size: 200px 300px;
  4.   /* 或者是用 background-size: contain; */
  5.   height: 300px;
  6.   width: 200px;
  7. }

JavaScript

像素密度可以通过javascript的window.devicePixelRatio来查询(注意：不是所有浏览器都支持devicePixelRatio)。一旦检测到高密度显示器，你就可以用高质量图片替换普通图片：

  1. $(document).ready(function(){
  2.   if (window.devicePixelRatio > 1) {
  3.     var lowresImages = $('img');
  4.     images.each(function(i) {
  5.       var lowres = $(this).attr('src');
  6.       var highres = lowres.replace(".", "@2x.");
  7.       $(this).attr('src', highres);
  8.     });
  9.   }
  10. });

SVG(Scalable Vector Graphics)

由于位图本身固有的性质，不可能无限制的缩放。而恰恰这是矢量图的优势所在。

Icon Fonts

Twitter的 bootstrap使Icon Fonts 更加的流行，该技术是通过@font-face引入基于icon的字体来代替位图icon，这样icon就不再受分辨率影响。用纯色icon代替字母的web Fonts，可以用CSS来调整样式，就像网页里其它文本一样。

参考资料

原文: https://leohxj.gitbooks.io/front-end-database/content/user-interface/about-retina.html