【移転】Retina_html/css_WEB-ITnoseのWeb時代へ

転載元: http://www.w3cplus.com/css/towards-retina-web.html

Wikipedia では Retina を「網膜」と訳しています。 「Retina」という言葉はもともと「網膜」を意味し、表示画面の解像度が非常に高く、肉眼では個々のピクセルを区別することが不可能であることを指します。

Appleの「iPhone4」、「新型iPad」、「Macbook Pro」はすでにRetinaテクノロジーを採用しています。新しい画面表示技術です。 Appleによると、Retinaスクリーンは960×640の解像度を3.5インチのディスプレイに圧縮できる超高ピクセル密度のLCDスクリーンだという。つまり、画面のピクセル密度は 326 ピクセル/インチ (ppi) です。

Apple の Retina スクリーン技術の使用は、Retina が画面に前例のない鮮明さと滑らかさをもたらすため、より多くの人々の注目を集めています。それに比べて、インターネットは巨大で、通常の画面から Retina への移行は遅くて苦痛です。プロセスを簡素化するための業界標準が存在しないため、Retina は、ユーザーに最高の視覚体験を確実に提供しようとするすべての Web 開発者やデザイナーにとって、依然として若干の問題をもたらしています。

これらの悩みを解決し、Web開発やデザインをより良く行うためには、時代の最先端技術を追い続けるWebフロントエンド担当者として、Retinaを理解して学ぶ必要があります。

Retina を深く理解して学ぶ前に、まずいくつかの基本概念を学ぶ必要があります。これらの基本概念は、より深く理解するのに役立ちます。

デバイスピクセル

デバイスピクセルは物理ピクセルとも呼ばれ、表示デバイス内の最小の物理コンポーネントです。各ピクセルは、オペレーティング システムに応じて独自の色と明るさを設定できます。これらのデバイスのピクセル間のわずかな距離が、私たちの肉眼を騙して画像を見ているように見せかけます。

画面密度

画面密度とは、デバイスの表面に存在するピクセル数を指し、通常は 1 インチあたりのピクセル数 (PPI) で測定されます。 Appleはこれを技術用語「Retina」で販売し、これを二重密度ディスプレイと呼び、人間の目は個々のピクセルを区別できないと主張している。ディスプレイのピクセル密度が 300ppi を超えると、人間の目は個々のピクセルを区別できなくなります。これは、表示デバイスの解像度が人間の網膜が識別できるピクセルの限界に達したことも意味します。したがって、携帯電話のディスプレイのピクセル密度が 300ppi 以上になると、粒状感は現れなくなり、携帯型タブレットの電子ディスプレイのピクセル密度が 260ppi 以上になると、ザラザラ感は現れなくなります。 Apple モバイル コンピュータの Retina ディスプレイ 個々のピクセルは 200ppi を超えると区別できなくなります。

CSS ピクセル

CSS ピクセルは、主にブラウザーで Web ページ上のコンテンツを正確に測定 (決定) するために使用される抽象的な単位です。一般に、CSS ピクセルはデバイス非依存ピクセル、または略して「DIP」と呼ばれます。標準の表示密度では、1 つの CSS ピクセルが 1 つのデバイス ピクセルに対応します。

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

上記のコードは、表示デバイス上に 200x300 ピクセルのボックスを描画します。ただし、Retina 画面では、同じ div は同じ物理サイズのディスプレイを維持するために 400x600 デバイス ピクセルを使用します。その結果、図に示すように、各ピクセルは実際には通常のピクセルの 4 倍になります。 CSS ピクセルは実際には 4 つに分割されているため、色はおおよそしか選択されず、ぼやけて見えます。したがって、Web 開発とデザインでは、「デバイスのピクセル比」によって問題を解決できます。

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」は、デバイス上の物理ピクセルとデバイスのピクセル (デバイスに依存しないピクセル (ディップ)) の比率です。彼の計算式は、window.devicePixelRatio = 物理ピクセル/ディップです。

dip または dp、(デバイスに依存しないピクセル、デバイスに依存しないピクセル) は画面密度に関連します。 dip を使用すると、網膜デバイスと非網膜デバイスを区別するのに役立ちます。

Retina スクリーン以外のすべての iPhone を垂直に表示すると、その幅は 320 物理ピクセルになります。「メタ」を通じて「ビューポート」を変更すると、

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

このとき、ウィンドウ レイアウトの幅は 320 ピクセルになります (幅とは異なります)。以下の図に示すように、視覚的にページ全体が自然に画面を覆うように (表示を拡大することなく 2 つは同じサイズになります):

このように、非対応の iPhone では、 -retina スクリーン、スクリーンの物理ピクセルは 320 ピクセルであり、独立したピクセルも 320 ピクセルであるため、window.devicePixelRatio は 1 に等しくなります。

iPhone4s などの Retina スクリーンを備えた iPhone の場合、縦向きで表示すると、物理的な画面ピクセルは 640 ピクセルです。同様に、ユーザーが

を設定すると

<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视网膜时代的页面》做了这篇笔记。希望对初次接触的朋友有所帮助。如果有说错的地方，还请同行朋友指正。谢谢。