一、关于设备像素比（devicePixelRatio）
所谓设备像素比（devicePixelRatio[dpr]）指的就是物理像素(physical pixel)和独立像素(device-independent pixels** [dips]**)的比例。
基本公式就是:设备像素比 = 物理像素 / 设备独立像素 //在某个方向上，x或者y
物理像素：就是我们经常所说的分辨率，如iphone 6 的分辨率就是750x1334
独立像素：就是手机的实际视窗，如iphone 6的视窗就是375x667
所以iphone 6的设备像素比 = 750/375 = 2
当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏
当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。
二：适配方案
1.Media Queries媒体查询（只能用于背景图片）
通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配
.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */
background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */
background-image: url(img_2x.png);
}
}
2.JavaScript的解决方案
使用js对“window.devicePixelRatio”进行判断，然后根据对应的值给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);
});
}
});
3.使用SVG矢量图像
