走向视网膜（Retina）的Web时代

时间  2019-11-08
标签 走向 视网膜 retina web 时代 栏目 HTML 繁體版
原文   原文链接

维基百科将Retina译为“视网膜”。"Retina"一词，原意是“视网膜”的意思，指显示屏的分辨率极高，使得肉眼没法分辨单个像素。javascript

苹果的“iPhone4”和"new iPad"以及“Macbook Pro”中已经使用了Retina(视网膜)技术。这是一种新的屏幕的显示技术。苹果表示，Retina屏幕是一种具有超高像素密度的液晶屏，它能够将960x640的分辨率压缩到一个3.5英寸的显示屏内。也就是说，该屏幕的像素密度达到326像素/英寸（ppi）。php

苹果采用Retina屏幕技术获得了更多人的亲眯，由于Retina给画面带来了史无前例的清晰平滑效果。相比之下，互联网很是的庞大，从当初的普通屏幕过渡到Retina是件缓慢而又痛苦的事情。在缺乏行业标准来简化这个过程，每一个Web开发人员和设计者为了确保他们的用户获得最好的视觉体验，Retina仍是给他们带来了些小麻烦。css

为了解决这些麻烦，更好的从事Web开发和设计，作为一名紧跟时代前沿技术的Web前端人员是颇有必要了解学习Retina。html

在深刻了解和学习Retina以前，咱们须要了先学习一些基本概念，这些基本概念将更好的带领咱们深刻下去。前端

设备像素

Retina web

设备像素也被称为物理像素,他是显示设备中一个最微小的物理部件。每一个像素能够根据操做系统设置本身的颜色和亮度。正是这些设备像素的微小距离欺骗了咱们肉眼看到的图像效果。java

屏幕密度

屏幕密度是指一个设备表面上存在的像素数量，它一般以每英寸有多少像素来计算（PPI）。苹果将这个营销出一个专业的术语“Retina”,将其称为双密度显示，声称人类的肉眼将没法区分单个像素。当一个显示屏像素密度超过300ppi时，人眼就没法区分出单独的像素。这也是讲：显示设备清晰度已达到人视网膜可分辨像素的极限。所以行动电话显示器的像素密度达到或高于300ppi就不会再出现颗粒感，而手持平板类电器显示器的像素密度达到或高于260ppi就不会再出现颗粒感，苹果行动电脑的Retina显示器像素密度只要超过200ppi就没法区分出单独的像素。css3

CSS像素

Retina web

CSS像素是一个抽象的单位，主要使用在浏览器上，用来精确的度量（肯定）Web页面上的内容。通常状况下，CSS像素被称为与设备无关的像素（device-independent像素），简称为“DIPs”。在一个标准的显示密度下，一个CSS像素对应着一个设备像素。web

<div height="200" width="300"></div>

上面的代码，将会在显示屏设备上绘制一个200x300像素的盒子。可是在Retina屏幕下，相同的div却使用了400x600设备像素，保持相同的物理尺寸显示，致使每一个像素点实际上有4倍的普通像素点，如图所示：编程

Retina web

反过来讲，一个CSS像素点实际分红了四个，这样就形成了颜色只能近似选取，因而，咱们看上去就变得模糊了。那么在Web开发和设计中，咱们能够经过"device-pixel-ratio"来解决。浏览器

device-pixel-ratio,
-o-device-pixel-ratio,
-moz-device-pixel-ratio,
-Webkit-device-pixel-ratio {
  …
}

或者你可使用未来的写法：

device-pixel-ratio,
-o-min-device-pixel-ratio,
min--moz-device-pixel-ratio,
-Webkit-min-device-pixel-ratio {
  …
}

在javascript中，“window.devicePixelRatio”能够用来得到相同的比率，虽然目前浏览器支持还有限。但这种技术将会慢慢被支持。

"window.devicePixelRatio"其实指的就是“devicePixelRatio”,咱们来看看“window.devicePixelRatio”是什么？简单点说“window.devicePixelRatio”是设备上物理像素和设备像素（device-independent pixels (dips)）的比例。他有一个计算公式：window.devicePixelRatio = 物理像素/dips。

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip能够用来辅助区分视网膜设备仍是非视网膜设备。

全部非视网膜屏幕的iPhone在垂直屏幕显示的时候，他的宽度为320物理像素，当你经过“meta”改变“viewport”时：

<meta name="viewport" content="width=device-width">

这个时候，视窗布局宽度变成320px（不一样于视觉区域宽度，不放大显示状况下，二者大小一致），这样视觉上，整个页面很天然的覆盖在屏幕上，以下图所示：

Retina web

这样，非视网膜屏幕的iphone上，屏幕物理像素320像素，独立像素也是320像素，所以window.devicePixelRatio等于1.

而对于视网膜屏幕的iphone，如iphone4s, 纵向显示的时候，屏幕物理像素640像素。一样，当用户设置

<meta name="viewport" content="width=device-width">

这个时候，其视区宽度并非640像素，而是320像素，这是为了有更好的阅读体验 – 更合适的文字大小。

这样，在视网膜屏幕的iphone上，屏幕物理像素640像素，独立像素仍是320像素，所以，window.devicePixelRatio等于2.

位图像素

Retina web

位图是由像素（Pixel）组成的，像素是位图最小的信息单元，存储在图像栅格中(PNG, JPG, GIF等等)。每一个像素都具备特定的位置和颜色值。按从左到右、从上到下的顺序来记录图像中每个像素的信息，如：像素在屏幕上的位置、像素的颜色等。位图图像质量是由单位长度内像素的多少来决定的。单位长度内像素越多，分辨率越高，图像的效果越好。

位图也称为“位图图像”“点阵图像”“数据图像”“数码图像”。

基于图像的栅格分辨率，图像在Web中是由CSS像素定义了一个抽象的大小。浏览器挤压或者拉伸图像都是基于其CSS高度或者宽度来进行呈现的一个过程。

当一个光栅图像在标准设备下全屏显示时,一位图像素对应的就是一设备像素,致使一个彻底保真的显示。由于一个位置像素不能进一步分裂，当在Retina屏幕下时，他要放大四倍来保持相同的物理像素的大小，这样就会丢失不少细节，形成失真的情形。换句话说，每一位图像素被乘以四填补相同的物理表面在视网膜屏幕下显示。

Retina web

高分辨率屏幕与高像素密度屏幕

在 Retina 视网膜屏幕面世以前人们不多关注像素密度，尤为在 Windows 系统下，提升屏幕分辨率通常都是经过提升屏幕尺寸。而随着屏幕分辨率的提高，图像和文字显示目标会相应缩小，形成观看极其不便。由于系统并不会自动根据屏幕尺寸和分辨率关系相应的调整文字和图标的大小。（即便手动调整也会由于微软一直采用的点阵字体和大多数位图在提升分辨率后，由于多于出的像素点没有填充渲染会出现拉伸，进而会产生锯齿，这也是系统不会自动适配的缘由之一）这也就给咱们形成一种假象：显示器尺寸越大，分辨率就会越大。

因此当最近苹果的 Retina 视网膜屏幕令不少人困惑不已，为何那么小的屏幕会有那么大的分辨率。为何那么大的分辨率，非但没有使得文字和图像变小，反而更加清晰了呢？

高像素密度屏幕（高 ppi）

严格来讲，高像素密度屏幕也是属于高分辨率屏幕，不一样的是高像素密度屏幕在提高了分辨率的同时也提升了其像素密度，即相同的尺寸有着更大的分辨率。以评估的 Retina 视网膜屏幕为例，它并非像普通显示器那样经过增大尺寸来增长分辨率，而是靠提高单位面积屏幕的像素数量，即像素密度来提高分辨率，这样就有了高像素密度屏幕。

同时操做系统也会自动采起相应的模式（如 Mac 下的 HiDPI）进行适配，将缩小后的字体（苹果一直采用矢量字体）和图标从新放大，这样苹果用了更多的像素数来显示一样的内容，显示尺寸仍然不变，可是多了更多细节，所以会有很是明显的视觉效果提高。

这样一来咱们能够看一个简单的换算

iPhone/iPod Touch

普通屏幕分辨率 ====>  320px X 480px
Retion分辨率   ====>  640px X 960px

iPad,iPad2/New iPad

普通屏幕分辨率 ====>  768px X 1024px
Retion分辨率   ====>  1536px X 2048px

换算关系

普通屏幕分辨率 ====>  1点=1像素
Retion分辨率   ====>  1点=2像素

上面两段文字内容摘自于南宮瑞揚的《retina视网膜时代的页面》一文。

Retina设备

Retina是由苹果提出来的，根据苹果发布产品的定义：PPI高于210（笔记本电脑）、260（平板电脑）、300（手机）的屏幕都称为Retina屏幕

Retina web

经过上面的内容介绍，咱们大体了解了Retina周边相关的术语，以及他们之间的关系和区别，若是你须要深刻的了解Retina，咱们就继续往下阅读。

尽管咱们仍处理普通屏幕向Retina屏幕的转变中，但如何使用Retina来优化Web图形的方法仍是如雨后春笋涌现，并且还有更多的人在关注和分享。

THML和CSS的标准

最直截了当的方法就是经过手动制图或以编程的方式制做两种不一样的图形，一张是普通屏幕的图片，另一种是Retina屏幕的图形，并且Retina屏幕下的图片是普通屏幕的两倍像素。看个实例，有一张200x300像素的图片（CSS像素），而后将一个位图的像素400x600上传到你的服务器上，经过CSS样式或HTML属性将其压缩50%，这个时候，在一个标签分辨率的显示器上，其呈现的图像是位图的四分之一像素。简单点理解，普通屏幕下的图像被压缩，减小像素取样（只是位图含像素的四分之一），这样就形成了资源浪费。同时把这个过程称为＂Downsampled＂。

Retina web

但在Retina屏幕下，相同的图像会使用四倍的物理像素显示，这样一来，每一个物理像素最终彻底匹配一位图像素，使用图像获得彻底的呈现。

Retina web

有几种方法能够实现这样的效果。

一、使用HTML

最简单的方法就是经过“img”标签，设置“width”和“height”属性：

<img src="example@2x.png" width="200" height="300" />

这里注意了，即便指定的图片高度是可选的，可是在加载图片前，浏览器已经预留了所需的空间。这样就能够防址页面布局更改图片时，在加载一次。

２、使用JavaScript

一样的效果，咱们能够经过JavaScript脚本对图像（为Retina屏幕准备的图像）进行减半。

$(window).load(function() {
  var images = $('img');
  images.each(function(i) {
    $(this).width($(this).width() / 2);
  });
});

３、使用CSS

另一种方法就是经过CSS来实现。那么常见的方法就是给元素设置一个背景图像，好比说给“div”元素设置一个背景图像，最关键的是给这个背景图像设置＂background-size＂，来指定背景图像的大小，你也能够给元素设置一个大小，而后给＂background-size＂设置一个“contain”属性值。不过惋惜的是ＩＥ７８不支持这个属性的运用。

.image {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  /*或者设置background-size: contain; */
  height: 300px;
  width: 200px;
}

你还可使用元素的伪元素来代替

.image-container:before {
  background-image: url(example@2x.png);
  background-size: 200px 300px;
  content:'';
  display: block;
  height: 300px;
  width: 200px;
}

上面经过三种方法来实现，那么来看看他们的对比：

HTML和CSS方法的优势

  1. 很容易实现
  2. 能跨浏览器兼容

HTML和CSS方法的缺点

  1. 非Retina屏幕下必须下载更大的图片资源
  2. Downsampled图像在不一样的分辨下可能会失去必定的清晰度
  3. background-size在IE９如下浏览器不能获得友好支持

来看一个张旭鑫大师的经验之谈《视网膜New iPad与普通分辨率iPad页面的兼容处理》。

有一张200x200像素的图片（CSS像素，也就是普通像素点或者说是标准像素点），咱们给图片设置一个CSS样式：

img {
  width:200px;
  height:200px;
}

在iPad2或Mini iPad中就是很正常显示的图片；可是，在New iPad中，1个CSS像素点实际上有4个位图像素点，1个分红4个，显然不够分啊，只能颜色近似选取，因而，图片感受就是模糊的。

所以，要想让视网膜屏幕下的图片高清晰显示，咱们须要的图片的原始大小不能是200×200像素，而须要2倍高宽，即400×400像素，CSS像素限制依然是:

img {
  width:200px;
  height:200px;
}

此时，视网膜屏幕下图片就显示OK了（非视网膜屏幕图片被压缩-减小像素取样——资源浪费！）。

查询像素密度

为Retina屏幕下查询Web图像的像素密度，而后调用对应的图像。目前较为流行的方式是经过CSS或者JavaScript来实现。

1 、使用CSS Media Queries

能够经过“device-pixel-ratio”属性或者其扩展属性“min-device-pixel-ratio”和“max-device-pixel-ratio”。这几个Media Queries可使用background-image为Retina准备高精密度像素的图片。

.icon {
  background-image: url(example.png);
  background-size: 200px 300px;
  height: 300px;
  width: 200px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .icon {
    background-image: url(example@2x.png);
  }
}

经过“window.devicePixelRatio”的比例“1.5”或"2"为不一样的苹果设备作相对应的查询。

iPhone4

@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */
}

Retian屏幕和普通屏幕

@media only screen and (min-width: 320px) {

  /* Small screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 

  /* Small screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 700px) {

  /* Medium screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 

  /* Medium screen, retina, stuff to override above media query */

}

@media only screen and (min-width: 1300px) {

  /* Large screen, non-retina */

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 

  /* Large screen, retina, stuff to override above media query */

}

当实没怎么搞懂上面的代码，今天可算是有明白了。更多的media queries能够点击CSS3 Media Queries模板

CSS Media Queries的优势

  1. 只有对应的目标元素才会下载图片资源
  2. 跨浏览器兼容
  3. 像素能够精确控制

CSS Media Queries的缺点

  1. 单调无味的实现过程，特别是大型项目中
  2. 只能经过HTML元素的背景图片来实现，无任何语义化可言

二、使用JavaScript

使用js对“window.devicePixelRatio”进行判断，而后根据对应的值给Retina屏幕选择图像。

$(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);
    });
  }
});

其中Retina.js是为Retina而生的，基本上实现了上面的全部功能。

前面也说过了，devicePixelRatio目前支持的浏览器并很少，但未来会有更多的浏览器支持这一技术。

Javascript查询的优势

  1. 易于实施
  2. 非Retina屏幕不用下载过大的资源
  3. 像素精确控制

Javascript查询的缺点

  1. Retina屏幕下必须下载标准备和高精密度的两个资源
  2. Retina屏幕下图像交互可见
  3. 浏览器兼容性不强

可缩放矢量图形

无论使用什么方法，光栅衅像仍然有本身固定的位图分辨率，也就是其缩放始终受限于其像素，也绝对没法无限制的伸缩。可是矢量图就不同，他能够随意的进行伸缩，而无任何影响。这就是在Retina屏幕下的Web图形，矢量图形具备没法可比的优点。

到目前为止，基于XML的svg格式制做的矢量图获得了70&以上的浏览器支持，可使用svg绘制各类图形，而且能够在Retina下任意的伸缩。

作为web设计人员，使用SVG最简单的方法是经过HTML的img标签、CSS的background属性或者伪元素的content中的url()。

HTML的img标签调用svg

<img src="example.svg" width="200" height="300" />

在这里一个svg图像能够作为普通显屏和Retina显屏的通用图像，能够作任何的伸缩，而不会像光栅位图同样失真，并且资源统一，节省带宽，方便维护。

CSS中调用svg图像

svg图像能够像普通图像同样，看成元素的背景图片来应用

.image {
  background-image: url(example.svg);
  background-size: 200px 300px;
  height: 200px;
  width: 300px;
}

除了当成元素的背景图片使用以外，还能够经过伪元素的“content”来调用

.image-container:before {
  content: url(example.svg);
}

若是你想在IE7-8和Android2.x上运用，那么使用使用png图片来代替svg图像

.image {
  background-image: url(example.png);
  background-size: 200px 300px;
}

.svg {
  .image {
    background-image: url(example.svg);
  }
}

在HTML标签中，给img标签自定义一个属性，给这个自定义属性设置一个png图片，以作备用，不过这种方法须要必定的脚本配合使用。

<img src="example.svg" data-png-fallback="example.png" />

须要的脚本

$(document).ready(function(){
  if(!Modernizr.svg) {
    var images = $('img[data-png-fallback]');
    images.each(function(i) {
      $(this).attr('src', $(this).data('png-fallback'));
    });
  }
});

SVG矢量图的优势

  1. 一个资源适合全部设备
  2. 易于维护
  3. 面向将来的:可伸缩向量图形

SVG矢量图的缺点

  1. 没有像素那样有精度
  2. 因为文件大小，不适合复杂的图形
  3. 不支持IE7-8和早期的安卓版本

零零散散的了解了Retina是个什么东东？那么有些同窗肯会问，作为前端人员，如何作，网站才能适应Retina时代的产品呢？

mir.aculo.us的信息图会告诉你如何让网站适应Retina分辨率

Retina web

此图由南宮瑞揚根据mir.aculo.us的信息图所译。有关于更详细的介绍请点击这里

如需转载，烦请注明出处：http://www.w3cplus.com/css/towards-retina-web.html

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程