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

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

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

這篇文章的內(nèi)容主要分為兩個(gè)部分：

高清屏（Retina）相關(guān)概念解析和高清屏（Retina）與前端開發(fā)的關(guān)系；

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

注：本篇文章的所有圖片來源于網(wǎng)絡(luò)，如有侵權(quán)請告知。

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

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

特點(diǎn)如下：

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

同樣大小屏幕上顯示的像素點(diǎn)由一個(gè)變?yōu)槎鄠€(gè)；

看一張喬幫主當(dāng)年發(fā)布 高清屏（Retina）時(shí)的一張照片：

由喬幫主背后的那兩張圖可以發(fā)現(xiàn)，高清屏和普通平的主要區(qū)別：高清屏（Retina）和普通屏相比，相同區(qū)域的物理像素點(diǎn)數(shù)，高清屏是普通屏的4倍。

先來看一張圖：

由上面的圖我們可以知道，當(dāng)我們使用css設(shè)置了一個(gè)區(qū)域以后，高清屏含有的像素點(diǎn)數(shù)是普通屏的4倍。而css設(shè)置的像素值（px）屬于普通像素點(diǎn)，或者是標(biāo)準(zhǔn)像素點(diǎn)。

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

可以看下圖來加深理解：

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

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

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

下面是我做的一個(gè)簡單的實(shí)驗(yàn)，比如說我現(xiàn)在有一個(gè)276x90的圖標(biāo)文件。我直接把它設(shè)置為一個(gè)div的背景，在瀏覽器中看效果：

代碼如下：

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

在網(wǎng)頁中的效果如下圖：

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

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

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

因?yàn)榘沧慨a(chǎn)品的參差不齊和廠商對屏幕制造標(biāo)準(zhǔn)的標(biāo)準(zhǔn)不一樣。這個(gè)放大的比例并不是固定的。還好我們有一個(gè)叫設(shè)備像素比的東西來檢測當(dāng)前屏幕是不是屬于高清屏幕。

設(shè)備像素比的英文單詞為devicePixelRatio。它有一個(gè)計(jì)算公式如下：

devicePixelRatio=屏幕物理像素/設(shè)備獨(dú)立像素

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

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

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

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

下面的是iphone3gs屏幕信息：

下面是iphone4s屏幕信息：

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

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

而對于iphone4s來說，當(dāng)屏幕縱向顯示的時(shí)候，屏幕的物理像素是640像素，而視區(qū)寬度不是640像素而是320像素。

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

由上面的舉例相信已經(jīng)對設(shè)備的物理像素和獨(dú)立像素有了一個(gè)認(rèn)識，那么總結(jié)如下：

設(shè)備的物理像素（也叫設(shè)備像素），就是屏幕顯示顏色的最小的物理單元，也就是我們經(jīng)常看到的手機(jī)分辨率所描述的數(shù)字；

設(shè)備獨(dú)立像素（與密度無關(guān)的像素），就是我們手機(jī)的實(shí)際的視窗口的大小。具體來說可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素(比如: css像素)，然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

通過對于第一部分的了解，我們可能已經(jīng)知道怎么區(qū)分高清屏和普通屏了。網(wǎng)上網(wǎng)友總結(jié)的結(jié)論如下：

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

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

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

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

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

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

示例的demo如下：

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

只有對應(yīng)的目標(biāo)元素才會下載圖片資源

跨瀏覽器兼容

像素可以精確控制

單調(diào)無味的實(shí)現(xiàn)過程，特別是大型項(xiàng)目中

只能通過HTML元素的背景圖片來實(shí)現(xiàn)，無任何語義化可言

使用js對“window.devicePixelRatio”進(jìn)行判斷，然后根據(jù)對應(yīng)的值給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);
    });
  }
});

易于實(shí)施

非Retina屏幕不用下載過大的資源

像素精確控制

Retina屏幕下必須下載標(biāo)準(zhǔn)備和高精密度的兩個(gè)資源

Retina屏幕下圖像交互可見

瀏覽器兼容性不強(qiáng)

一個(gè)資源適合所有設(shè)備

易于維護(hù)

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

沒有像素那樣有精度

由于文件大小，不適合復(fù)雜的圖形

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

高清顯示屏原理及設(shè)計(jì)方案

設(shè)備像素比devicePixelRatio簡單介紹