摘要：一前言有時(shí)候需要前端做到移動(dòng)端高清顯示，面對(duì)開發(fā)移動(dòng)端頁面，面對(duì)不同分辨率的手機(jī)，面對(duì)不同屏幕尺寸的手機(jī)。所以對(duì)于圖片高清的問題，比較好的方案是兩倍圖片長(zhǎng)寬增大到倍。

有時(shí)候需要前端做到移動(dòng)端高清顯示，1、面對(duì)開發(fā)移動(dòng)端H5頁面，2、面對(duì)不同分辨率的手機(jī)，3、面對(duì)不同屏幕尺寸的手機(jī)。

前端開發(fā)正常是，視覺的小哥哥給我們psd或者導(dǎo)出的skech文件，這個(gè)就是視覺稿，然后前端開始寫結(jié)構(gòu)，寫元素，調(diào)整，優(yōu)化等等。

對(duì)于移動(dòng)端開發(fā)而言，達(dá)到頁面高清的效果，視覺稿的規(guī)范往往會(huì)遵循這兩點(diǎn)：

（1）選取一款手機(jī)的屏幕寬高作為基準(zhǔn)（以前是iphone4的320480，現(xiàn)在更多的是iphone6的375667）。

（2）對(duì)于retina屏幕（可以將更多的像素點(diǎn)壓縮至一塊屏幕里，從而達(dá)到更高的分辨率并提高屏幕顯示的細(xì)膩程度）（如：dpr=2），為了達(dá)到高清效果，視覺稿的畫布大小會(huì)是基準(zhǔn)的2倍，也就是說像素點(diǎn)個(gè)數(shù)是原來的4倍（比如iphone6的，原先的375667，就會(huì)變成7501334）。

肯定有疑問：（1）為啥dpr=2的手機(jī)，為什么畫布大小*2，就可以解決高清問題？（2）對(duì)于2倍大小的視覺稿，具體的css是如何還原每一個(gè)區(qū)塊的真實(shí)寬高（布局問題）？

一個(gè)物理像素是顯示器（手機(jī)屏幕）上最小的物理顯示單元，在操作系統(tǒng)的調(diào)度下，每一個(gè)設(shè)備像素都有自己的顏色值和亮度值。

設(shè)備獨(dú)立像素也叫與密度無關(guān)像素，可以認(rèn)為是計(jì)算機(jī)坐標(biāo)系統(tǒng)中得到一個(gè)點(diǎn)，這個(gè)點(diǎn)代表一個(gè)可以由程序使用的虛擬像素（比如：css像素），然后由相關(guān)系統(tǒng)轉(zhuǎn)換為物理像素。

所以，物理像素和設(shè)備獨(dú)立像素之間存在一定的對(duì)應(yīng)關(guān)系，這就是要說的設(shè)備像素比。

設(shè)備像素比（簡(jiǎn)稱為dpr）定義了物理像素和設(shè)備獨(dú)立像素的對(duì)應(yīng)關(guān)系，它的值可以根據(jù)公式計(jì)算得出：

設(shè)備像素比 = 物理像素 / 設(shè)備獨(dú)立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通過window.devicePixelRatio方法獲取當(dāng)前設(shè)備的dpr。

在css中，通過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio進(jìn)行媒體查詢，對(duì)于不同的dpr的設(shè)備，做一些樣式適配（主要是針對(duì)webkit內(nèi)核的瀏覽器和webview）。

以iphone6為例：

（1）設(shè)備寬高為375*667，可以理解成設(shè)備的獨(dú)立像素（css像素）；

（2）dpr為2，根據(jù)上面計(jì)算公式，物理像素應(yīng)該就是750*1334。

用一張圖來表現(xiàn)，就是這樣(原諒我的盜圖)：

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現(xiàn)的大小是一致的，不同的是1個(gè)css像素所對(duì)應(yīng)的物理像素個(gè)數(shù)是不一致的。

在普通屏幕下，1個(gè)css像素 對(duì)應(yīng) 1個(gè)物理像素(1:1)。 在retina 屏幕下，1個(gè)css像素對(duì)應(yīng) 4個(gè)物理像素(1:4)。

一個(gè)位圖像素是柵格圖像（如：png，jpg，gif等）最小的數(shù)據(jù)單元。每一個(gè)位圖像素都包含了一些自身的顯示信息（如：顯示位置，顏色值，透明度等）。

理論上：一個(gè)位圖像素對(duì)應(yīng)于1個(gè)物理像素，圖片才能得到完美清晰的展示。。

普通屏幕沒有問題的，但是在retina屏幕下會(huì)出現(xiàn)位圖像素點(diǎn)不夠，從而導(dǎo)致圖片模糊的情況。

看一張圖：

如圖所示：對(duì)于dpr=2的retina屏幕而言，1個(gè)位圖像素對(duì)于4個(gè)物理像素，由于單個(gè)位圖像像素不可以在分隔，只能就近取色，從而導(dǎo)致圖片模糊。

所以對(duì)于圖片高清的問題，比較好的方案是兩倍圖片（長(zhǎng)寬增大到2倍）。

如：200×300(css pixel)img標(biāo)簽，就需要提供400×600的圖片。

如此下來，位像素點(diǎn)個(gè)數(shù)就是原來的4倍，在retina屏幕下，位圖像素點(diǎn)個(gè)數(shù)就可以跟物理像素點(diǎn)個(gè)數(shù)形成1:1的比例，圖片自然就清晰了，解決了第一個(gè)疑問。

如果出現(xiàn)，普通屏幕下，也用了兩倍圖片，會(huì)怎么樣？

很明顯，在普通屏幕下，200×300(css pixel)img標(biāo)簽，所對(duì)應(yīng)的物理像素個(gè)數(shù)就是200×300個(gè)，而兩倍圖片的位圖像素個(gè)數(shù)則是200×300*4，所以就出現(xiàn)1個(gè)物理像素點(diǎn)對(duì)應(yīng)4個(gè)位圖像素點(diǎn)，它的取色也只能通過一定的算法(顯示結(jié)果就是一張只有原圖像素總數(shù)四分之一，我們稱這個(gè)過程叫做downsampling(降采樣，降低數(shù)據(jù)采樣率或分辨率的過程)).肉眼看上去雖然圖片不會(huì)模糊，但是會(huì)覺得圖片缺少一些銳利度，或者是有點(diǎn)色差(但還是可以接受的)。

移動(dòng)端H5開發(fā)，在不同的分辨率，不同屏幕的手機(jī)下會(huì)遇到幾個(gè)經(jīng)典問題

上面已經(jīng)講到了解決方案：圖片的長(zhǎng)寬的兩倍，然后圖片容器縮小50%。

比如：

1、img 標(biāo)簽

width: 200px;
height: 300px;
2、背景圖片

width: 200px;
height: 300px;
background-image: url(image@2x.jpg);
background-size: 200px 300px; // 或者: background-size: contain;
這樣的缺點(diǎn)就是，普通屏幕下：

1、同樣下載長(zhǎng)度都2倍的圖片，造成了資源浪費(fèi)。

2、圖片由于downSampling，會(huì)失去一些銳利度（或者色差）。

所以最好的解決辦法：不同的dpr下，加載不同的尺寸的圖片。

不管是通過css媒體查詢，還是通過js條件判斷都是可以的。所以需要準(zhǔn)備兩套圖片。

1px是設(shè)計(jì)師用他的像素眼，最關(guān)心的問題。

還是通過一張圖來解釋(原諒我再次盜圖)：

上圖中，對(duì)于一條1px寬的直線，它們?cè)谄聊簧系奈锢沓叽?灰色區(qū)域)的確是相同的，不同的其實(shí)是屏幕上最小的物理顯示單元，即物理像素，所以對(duì)于一條直線，iphone5它能顯示的最小寬度其實(shí)是圖中的紅線圈出來的灰色區(qū)域，用css來表示，理論上說是0.5px。

所以，設(shè)計(jì)師想要的retina下border: 1px;，其實(shí)就是1物理像素寬，對(duì)于css而言，可以認(rèn)為是border: 0.5px;，這是retina下(dpr=2)下能顯示的最小單位。

然而，無奈并不是所有手機(jī)瀏覽器都能識(shí)別border: 0.5px;，ios7以下，android等其他系統(tǒng)里，0.5px會(huì)被當(dāng)成為0px處理，那么如何實(shí)現(xiàn)這0.5px呢？

最簡(jiǎn)單的一個(gè)做法就是這樣(元素scale)：

.scale{
    position: relative;
}
.scale:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid #ffffd;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

我們照常寫border-bottom: 1px solid #ffffd;，然后通過transform: scaleY(.5)縮小0.5倍來達(dá)到0.5px的效果，但是這樣hack實(shí)在是不夠通用(如：圓角等)，寫起來也麻煩。

或者可以使用js來判斷當(dāng)前瀏覽器是否支持border的0.5px，如果支持就會(huì)在HTML上添加一個(gè)class名hairlines，

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement("div");
  testElem.style.border = ".5px solid transparent";
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1)
  {
    document.querySelector("html").classList.add("hairlines");
  }
  document.body.removeChild(testElem);
}

css

div {
  border: 1px solid #bbb;
}
 
.hairlines div {
  border-width: 0.5px;
}

1、http://www.smashingmagazine.c...

2、http://www.paintcodeapp.com/n...

3、http://iconmoon.com/blog2/iph...

4、http://dieulot.net/css-retina...