[Transfer] Toward the Web era of Retina_html/css_WEB-ITnose

Reprint source: http://www.w3cplus.com/css/towards-retina-web.html

Wikipedia translates Retina as "retina". The word "Retina" originally means "retina", which refers to the extremely high resolution of the display screen, making it impossible for the naked eye to distinguish individual pixels.

Retina technology has been used in Apple’s “iPhone4”, “new iPad” and “Macbook Pro”. This is a new screen display technology. Apple said that the Retina screen is an LCD screen with ultra-high pixel density that can compress a 960x640 resolution into a 3.5-inch display. In other words, the screen has a pixel density of 326 pixels per inch (ppi).

Apple’s use of Retina screen technology has gained more people’s attention because Retina brings unprecedented clarity and smoothness to the screen. In comparison, the Internet is huge, and the transition from ordinary screens to Retina is slow and painful. In the absence of industry standards to simplify the process, Retina still brings a little trouble to every web developer and designer trying to ensure their users get the best visual experience.

In order to solve these troubles and better engage in Web development and design, it is necessary for a Web front-end person who keeps up with the cutting-edge technology of the times to understand Learn Retina.

Before we understand and learn Retina in depth, we need to learn some basic concepts first. These basic concepts will better guide us in depth.

Device pixel

Device pixel is also called physical pixel, which is the smallest physical component in the display device. Each pixel can set its own color and brightness depending on the operating system. It’s the tiny distances between these device pixels that fool our naked eyes into seeing the image.

Screen Density

Screen density refers to the number of pixels present on the surface of a device, and it is usually measured in pixels per inch (PPI). Apple markets this under the technical term "Retina," calling it a dual-density display and claiming that the human eye won't be able to distinguish individual pixels. When the pixel density of a display exceeds 300ppi, the human eye cannot distinguish individual pixels. This also means that the resolution of the display device has reached the limit of the pixels that the human retina can distinguish. Therefore, if the pixel density of a mobile phone display reaches or exceeds 300ppi, the graininess will no longer appear, and if the pixel density of a handheld tablet electronic display reaches or exceeds 260ppi, the graininess will no longer appear. The pixel density of the Retina display of Apple mobile computers Individual pixels are indistinguishable beyond 200ppi.

CSS Pixel

CSS pixel is an abstract unit, mainly used in browsers to accurately measure (determine) the content on Web pages. Generally, CSS pixels are called device-independent pixels, or "DIPs" for short. At a standard display density, one CSS pixel corresponds to one device pixel.

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

The above code will draw a 200x300 pixel box on the display device. However, under the Retina screen, the same div uses 400x600 device pixels to maintain the same physical size display, resulting in each pixel actually having 4 times the normal pixels, as shown in the figure:

On the other hand, a CSS pixel is actually divided into four, which means that the color can only be selected approximately, so we look blurry. So in web development and design, we can solve it through "device-pixel-ratio".

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

Or you can use the future notation:

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

In javascript, "window.devicePixelRatio" can be used to get the same ratio, although browser support is currently limited . But this technology will slowly be supported.

"window.devicePixelRatio" actually refers to "devicePixelRatio". Let's take a look at what "window.devicePixelRatio" is? To put it simply, "window.devicePixelRatio" is the ratio of physical pixels on the device to device pixels (device-independent pixels (dips)). He has a calculation formula: window.devicePixelRatio = physical pixels/dips.

dip or dp, (device independent pixels, device independent pixels) is related to screen density. dip can be used to help differentiate between retina and non-retina devices.

When all non-retina screen iPhones are displayed vertically, their width is 320 physical pixels. When you change the "viewport" through "meta":

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

This time , the window layout width becomes 320px (different from the visual area width, the two are the same size when the display is not enlarged), so that visually, the entire page naturally covers the screen, as shown in the following figure:

In this way, on an iPhone with a non-retina screen, the physical pixels of the screen are 320 pixels, and the independent pixels are also 320 pixels, so window.devicePixelRatio is equal to 1.

And for iPhones with retina screens, such as iphone4s , when displayed in portrait orientation, the physical pixels of the screen are 640 pixels. Likewise, when the user sets

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

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

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

位图像素

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

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

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

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

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

在 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周边相关的术语，以及他们之间的关系和区别，如果你需要深入的了解Retina，我们就继续往下阅读。

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

THML和CSS的标准

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

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

有几种方法可以实现这样的效果。

1、使用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元素的背景图片来实现，无任何语义化可言

2、使用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分辨率

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

总结

Retina对于我来说也是一个新课题，边看边做笔记，但还是没有完全理解清楚。还需努力。花了几个晚上根据Reda Lemeden的《Towards A Retina Web》、张鑫旭的《视网膜New iPad与普通分辨率iPad页面的兼容处理》以及南?瑞?的《retina视网膜时代的页面》做了这篇笔记。希望对初次接触的朋友有所帮助。如果有说错的地方，还请同行朋友指正。谢谢。