摘要：一前言有時候需要前端做到移動端高清顯示，面對開發移動端頁面，面對不同分辨率的手機，面對不同屏幕尺寸的手機。所以對于圖片高清的問題，比較好的方案是兩倍圖片長寬增大到倍。

有時候需要前端做到移動端高清顯示，1、面對開發移動端H5頁面，2、面對不同分辨率的手機，3、面對不同屏幕尺寸的手機。

前端開發正常是，視覺的小哥哥給我們psd或者導出的skech文件，這個就是視覺稿，然后前端開始寫結構，寫元素，調整，優化等等。

對于移動端開發而言，達到頁面高清的效果，視覺稿的規范往往會遵循這兩點：

（1）選取一款手機的屏幕寬高作為基準（以前是iphone4的320480，現在更多的是iphone6的375667）。

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

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

一個物理像素是顯示器（手機屏幕）上最小的物理顯示單元，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。

設備獨立像素也叫與密度無關像素，可以認為是計算機坐標系統中得到一個點，這個點代表一個可以由程序使用的虛擬像素（比如：css像素），然后由相關系統轉換為物理像素。

所以，物理像素和設備獨立像素之間存在一定的對應關系，這就是要說的設備像素比。

設備像素比（簡稱為dpr）定義了物理像素和設備獨立像素的對應關系，它的值可以根據公式計算得出：

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

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

以iphone6為例：

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

（2）dpr為2，根據上面計算公式，物理像素應該就是750*1334。

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

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現的大小是一致的，不同的是1個css像素所對應的物理像素個數是不一致的。

在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。 在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。

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

理論上：一個位圖像素對應于1個物理像素，圖片才能得到完美清晰的展示。。

普通屏幕沒有問題的，但是在retina屏幕下會出現位圖像素點不夠，從而導致圖片模糊的情況。

看一張圖：

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

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

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

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

如果出現，普通屏幕下，也用了兩倍圖片，會怎么樣？

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

移動端H5開發，在不同的分辨率，不同屏幕的手機下會遇到幾個經典問題

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

比如：

1、img 標簽

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

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

1、同樣下載長度都2倍的圖片，造成了資源浪費。

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

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

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

1px是設計師用他的像素眼，最關心的問題。

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

上圖中，對于一條1px寬的直線，它們在屏幕上的物理尺寸(灰色區域)的確是相同的，不同的其實是屏幕上最小的物理顯示單元，即物理像素，所以對于一條直線，iphone5它能顯示的最小寬度其實是圖中的紅線圈出來的灰色區域，用css來表示，理論上說是0.5px。

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

然而，無奈并不是所有手機瀏覽器都能識別border: 0.5px;，ios7以下，android等其他系統里，0.5px會被當成為0px處理，那么如何實現這0.5px呢？

最簡單的一個做法就是這樣(元素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倍來達到0.5px的效果，但是這樣hack實在是不夠通用(如：圓角等)，寫起來也麻煩。

或者可以使用js來判斷當前瀏覽器是否支持border的0.5px，如果支持就會在HTML上添加一個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...