前端工程师手册

关于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属性进行控制:

.image {
  background-image: url([email protected]);
  background-size: 200px 300px;
  /* 或者是用 background-size: contain; */
  height: 300px;
  width: 200px;
}

JavaScript

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

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

SVG(Scalable Vector Graphics)

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

Icon Fonts

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

参考资料