引用自@莫聲谷
以iphone 6 為例，物理分辨率為 1334*750，4.7英寸，根據這些數據可以得出：
ppi =
= 326
也就是說 dpr = 2， 1px = 2dp
那么，假設我們要在 300px *300px 的容器里，顯示一張 300px*300px 的圖片，此時1個位圖信息對應4個dp，位圖信息不可分割，所以不足的地方會用相似的顏色表示，這也就是普通圖片在 Retian 屏幕下模糊的原因。
經過上面的分析，很顯然，我們需要讓 4個位圖信息對應4個dp，也就是我們需要一個二倍圖，600*600的圖
解決一：設置media query 跟具dpr的不同，設置不同尺寸的 圖片
可以用less或者sass寫一個 mixin，這里我用的sass
//_mixin.scss
@mixin bg-img($name,$w,$h,$dpr,$suffix:png){
@media screen and (-webkit-device-pixel-ratio: $dpr){
background:url(http://img.163.com/#{$name}_#{$w*$dpr}_#{$h*$dpr}.#{$suffix});
}
}
//main.scss
.box{
@include bg-img("bg",300, 300, 2);
}
//=>輸出
@media screen and (-webkit-device-pixel-ratio: 2) {
.box { background: url(http://img.163.com/bg_600_600.png); }
}
解決二： 設置viewport 的 initial-scal=0.5
這樣相當于，1px = 1dp，此時圖片就不需要二倍圖了,按照設計圖該給多大給多大，但是相對應的，div和字體的大小都會縮放，解決方案可以使用 rem布局,網上相關的內容很多，這里不再贅述。
吐槽###
簡書竟然不支持MathJax：
$$ppi=\frac{\sqrt{1334\times1334+750\times750}}{4.7}=326$$
