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

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

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

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

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

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

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

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

具備足夠高的物理像素密度而使人體肉眼無(wú)法分辨其中多帶帶像素點(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倍。

先來(lái)看一張圖：

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

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

可以看下圖來(lái)加深理解：

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

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

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

下面是我做的一個(gè)簡(jiǎn)單的實(shí)驗(yàn)，比如說(shuō)我現(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)頁(yè)中的效果如下圖：

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

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

由上面的知識(shí)可以知道。當(dāng)我們?cè)诟咔迤林惺褂闷胀▓D片的時(shí)候，相當(dāng)于圖片被放大了一倍（可以這么理解：普通屏幕的1px相當(dāng)于高清屏的2px）。

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

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

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

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

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

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

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

下面的是iphone3gs屏幕信息：

下面是iphone4s屏幕信息：

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

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

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

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

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

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

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

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

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

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

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

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

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

根據(jù)屏幕的設(shè)備像素比來(lái)加載不同圖片可以使用css 的media queries來(lái)解決，當(dāng)然使用css來(lái)解決也是兼容性最好的解決方案（其實(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);
  }
}

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

跨瀏覽器兼容

像素可以精確控制

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

只能通過(guò)HTML元素的背景圖片來(lái)實(shí)現(xiàn)，無(wú)任何語(yǔ)義化可言

使用js對(duì)“window.devicePixelRatio”進(jìn)行判斷，然后根據(jù)對(duì)應(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屏幕不用下載過(guò)大的資源

像素精確控制

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

Retina屏幕下圖像交互可見(jiàn)

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

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

易于維護(hù)

面向未來(lái)的:可伸縮向量圖形

沒(méi)有像素那樣有精度

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

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

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

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