摘要：高清屏概念解析和前端開發的關系高清屏概念解析高清屏概念的興起主要是從喬幫主發布設備開始興起。還好我們有一個叫設備像素比的東西來檢測當前屏幕是不是屬于高清屏幕。

做移動端h5開發很久了，從開始入行到現在。很多知識和工具都是在用前輩留下的遺產，都沒有深入的研究過原因，了解為什么要這么去做。

也許自己也是過了交給自己做什么就做什么的階段了。在國慶節有一個大塊的時間，把最近看到的知識總結一下，也算是對這方面的知識劃上一個句號。想想著實把國慶節過成了勞動節，沒辦法，自己就是這樣的一個人，“應該去做的，而且有能力做的，如果不去做，心里面總是不舒服”。

這篇文章的內容主要分為兩個部分：

高清屏（Retina）相關概念解析和高清屏（Retina）與前端開發的關系；

前端開發過程中使用什么手段區分高清屏和普通屏幕，并且衍生出的適配方案；

注：本篇文章的所有圖片來源于網絡，如有侵權請告知。

高清屏（Retina）概念的興起主要是從喬幫主發布 Retina 設備開始興起。主要功能如下：

具備足夠高的物理像素密度而使人體肉眼無法分辨其中多帶帶像素點的液晶屏。

特點如下：

一種具備超高像素密度的液晶屏；

同樣大小屏幕上顯示的像素點由一個變為多個；

看一張喬幫主當年發布 高清屏（Retina）時的一張照片：

由喬幫主背后的那兩張圖可以發現，高清屏和普通平的主要區別：高清屏（Retina）和普通屏相比，相同區域的物理像素點數，高清屏是普通屏的4倍。

先來看一張圖：

由上面的圖我們可以知道，當我們使用css設置了一個區域以后，高清屏含有的像素點數是普通屏的4倍。而css設置的像素值（px）屬于普通像素點，或者是標準像素點。

那么我們平時在普通屏幕中正常顯示的位圖圖像放在高清的屏幕上會有什么問題呢？由上面的知識可以知道，普通屏幕的1個CSS像素點對應4個高清屏幕的像素點，1個分成4個，不夠分的情況下，顏色會取近似值。所以在高清屏上，在普通屏幕正常顯示的圖片會變的模糊。

可以看下圖來加深理解：

這就是為什么我們現在的設計稿為什么都會設計成2倍稿的原因。為了兼容高清屏幕的圖片高清晰顯示，我們的裁切圖是2倍圖，在css中使用的時候會使用css壓縮2倍。

比如，我們有一個icon.png的文件，切圖大小是 200x200 。而我們使用的時候卻是使用css設置其大小為100x100。這樣基本上就會保證普通屏和高清屏顯示一致。

看了一些網友的文章。css壓縮會使圖片邊緣的銳度減小。

下面是我做的一個簡單的實驗，比如說我現在有一個276x90的圖標文件。我直接把它設置為一個div的背景，在瀏覽器中看效果：

代碼如下：

.item3{
    height:45px;
    width:138px;
    background:url(./4.png) no-repeat center;
    background-size:100% 100%;
}

在網頁中的效果如下圖：

我把這張圖截取下來放到 PS 中放大，之后的效果如下圖，可以明顯看到在有顏色的字體邊緣的顏色變淺，圖像周圍的銳度減小。

其實，在我們的開發過程中完全沒有必要去在意這里的這個細節問題，圖像邊緣的銳度也是在 PS 中放大了好多倍以后才看出來的，如果是人的肉眼是根本看不出來的。

由上面的知識可以知道。當我們在高清屏中使用普通圖片的時候，相當于圖片被放大了一倍（可以這么理解：普通屏幕的1px相當于高清屏的2px）。

因為安卓產品的參差不齊和廠商對屏幕制造標準的標準不一樣。這個放大的比例并不是固定的。還好我們有一個叫設備像素比的東西來檢測當前屏幕是不是屬于高清屏幕。

設備像素比的英文單詞為devicePixelRatio。它有一個計算公式如下：

devicePixelRatio=屏幕物理像素/設備獨立像素

devicePixelRatio其實就是window對象的一個屬性，它被大多數的webkit瀏覽器所支持。看下圖是我在我的MacBook Pro上的Chrome中做的測試。很明顯是屬于高清屏哈ヾ(=^▽^=)ノ

上面是對設備像素比的東西 做了一個簡單的了解，下面就來詳細了解下幾個比較重要的概念。

設備獨立像素（device independent pixels）又叫dip或者是dp。它可以用來輔助區分高清屏幕和非高清屏幕。

我們可以通過兩個典型的手機來理解上面的概念。iphone3gs和iphone4的屏幕最大的區別就是前者是普通屏幕而后者是使用了高清的retina屏幕。以下是我查到的一些參數信息：

下面的是iphone3gs屏幕信息：

下面是iphone4s屏幕信息：

在iphone3gs垂直的時候，屏幕的寬度為320物理像素。當我們使用的時候，會設置視窗布局寬度為屏幕的寬度320px，于是頁面就很自然的覆蓋在屏幕上。

所以在iphone3gs上屏幕的物理像素位320像素，獨立像素也是320像素。因此window.devicePixelRatio=1。

而對于iphone4s來說，當屏幕縱向顯示的時候，屏幕的物理像素是640像素，而視區寬度不是640像素而是320像素。

這樣在iphone4s上，屏幕的物理像素為640像素，獨立像素還是320像素，因此window.devicePixelRatio=2。

由上面的舉例相信已經對設備的物理像素和獨立像素有了一個認識，那么總結如下：

設備的物理像素（也叫設備像素），就是屏幕顯示顏色的最小的物理單元，也就是我們經?？吹降氖謾C分辨率所描述的數字；

設備獨立像素（與密度無關的像素），就是我們手機的實際的視窗口的大小。具體來說可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關系統轉換為物理像素。

通過對于第一部分的了解，我們可能已經知道怎么區分高清屏和普通屏了。網上網友總結的結論如下：

通過計算 devicePixelRatio 的值，是可以區分普通顯示屏和高清顯示器，當devicePixelRatio值等于1時（也就是最小值），那么它普通顯示屏，當devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清顯示屏。

那么這部分，就來簡單的了解下我們平時在開發過程中，對于我們使用的圖片怎么適配高清屏和普通屏。

原理也很簡單，就是根據不同的設備像素比來加載不同的圖片:

針對普通顯示屏(devicePixelRatio = 1.0、1.3)，加載一張1倍的圖片

針對高清顯示屏(devicePixelRatio >= 1.5、2.0、3.0)，加載一張2倍大的圖片

根據屏幕的設備像素比來加載不同圖片可以使用css 的media queries來解決，當然使用css來解決也是兼容性最好的解決方案（其實意味這我們要切兩套圖片1倍圖和2倍圖）。

示例的demo如下：

.css{/* 普通顯示屏(設備像素比例小于等于1.3)使用1倍的圖 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清顯示屏(設備像素比例大于等于1.5)使用2倍圖  */
    background-image: url(img_2x.png);
  }
}

只有對應的目標元素才會下載圖片資源

跨瀏覽器兼容

像素可以精確控制

單調無味的實現過程，特別是大型項目中

只能通過HTML元素的背景圖片來實現，無任何語義化可言

使用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屏幕不用下載過大的資源

像素精確控制

Retina屏幕下必須下載標準備和高精密度的兩個資源

Retina屏幕下圖像交互可見

瀏覽器兼容性不強

一個資源適合所有設備

易于維護

面向未來的:可伸縮向量圖形

沒有像素那樣有精度

由于文件大小，不適合復雜的圖形

不支持IE7-8和早期的安卓版本

高清顯示屏原理及設計方案

設備像素比devicePixelRatio簡單介紹