走向視網膜（Retina）的Web時代

時間 2019-11-08

原文原文鏈接

維基百科將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以前，咱們須要了先學習一些基本概念，這些基本概念將更好的帶領咱們深刻下去。前端

設備像素

設備像素也被稱爲物理像素,他是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。正是這些設備像素的微小距離欺騙了咱們肉眼看到的圖像效果。java

屏幕密度

屏幕密度是指一個設備表面上存在的像素數量，它一般以每英寸有多少像素來計算（PPI）。蘋果將這個營銷出一個專業的術語「Retina」,將其稱爲雙密度顯示，聲稱人類的肉眼將沒法區分單個像素。當一個顯示屏像素密度超過300ppi時，人眼就沒法區分出單獨的像素。這也是講：顯示設備清晰度已達到人視網膜可分辨像素的極限。所以行動電話顯示器的像素密度達到或高於300ppi就不會再出現顆粒感，而手持平板類電器顯示器的像素密度達到或高於260ppi就不會再出現顆粒感，蘋果行動電腦的Retina顯示器像素密度只要超過200ppi就沒法區分出單獨的像素。css3

CSS像素

CSS像素是一個抽象的單位，主要使用在瀏覽器上，用來精確的度量（肯定）Web頁面上的內容。通常狀況下，CSS像素被稱爲與設備無關的像素（device-independent像素），簡稱爲「DIPs」。在一個標準的顯示密度下，一個CSS像素對應着一個設備像素。web

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

上面的代碼，將會在顯示屏設備上繪製一個200x300像素的盒子。可是在Retina屏幕下，相同的div卻使用了400x600設備像素，保持相同的物理尺寸顯示，致使每一個像素點實際上有4倍的普通像素點，如圖所示：編程

反過來講，一個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（不一樣於視覺區域寬度，不放大顯示狀況下，二者大小一致），這樣視覺上，整個頁面很天然的覆蓋在屏幕上，以下圖所示：

這樣，非視網膜屏幕的iphone上，屏幕物理像素320像素，獨立像素也是320像素，所以window.devicePixelRatio等於1.

而對於視網膜屏幕的iphone，如iphone4s, 縱向顯示的時候，屏幕物理像素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屏幕下，相同的圖像會使用四倍的物理像素顯示，這樣一來，每一個物理像素最終徹底匹配一位圖像素，使用圖像獲得徹底的呈現。

有幾種方法能夠實現這樣的效果。

一、使用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方法的優勢

很容易實現
能跨瀏覽器兼容

HTML和CSS方法的缺點

非Retina屏幕下必須下載更大的圖片資源
Downsampled圖像在不一樣的分辨下可能會失去必定的清晰度
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的優勢

只有對應的目標元素纔會下載圖片資源
跨瀏覽器兼容
像素能夠精確控制

CSS Media Queries的缺點

單調無味的實現過程，特別是大型項目中
只能經過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查詢的優勢

易於實施
非Retina屏幕不用下載過大的資源
像素精確控制

Javascript查詢的缺點

Retina屏幕下必須下載標準備和高精密度的兩個資源
Retina屏幕下圖像交互可見
瀏覽器兼容性不強

可縮放矢量圖形

無論使用什麼方法，光柵釁像仍然有本身固定的位圖分辨率，也就是其縮放始終受限於其像素，也絕對沒法無限制的伸縮。可是矢量圖就不同，他能夠隨意的進行伸縮，而無任何影響。這就是在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矢量圖的優勢