这里主要参考引用了白树大神的文章：《高清显示屏原理及设计方案》，程序猿同学可以直接参考，里面还有兼容性很好的解决方案。

为什么图片会模糊

不是图片有问题，而是移动设备在变化；为了更好的在小屏幕下塞进更多的信息例如图片，智能移动设备的分辨率历来不低，这些年各种高分辨率屏幕更是成为了手机、平板的标配。

如果保持像素不变的话，在retina屏上的图片会比普通屏幕上小，变成之前的1/4；而一般网页为了布局不会随着设备而发生大变化，会保持图片尺寸不变的，就需要拉伸图片到原来的4倍，所以图片模糊是在所难免的。

这里延伸两篇文章，如果你有注意到上图的行列数

《一张图解释手机端8px原理》 《一切为了程序猿！详析手机端的8PX原理》

关键词说明

知道了为什么图片会糊，介绍几个关键词，便于理解之后的解决方案

• 高清显示屏

  具有这两点特征的都是高清显示屏：1、具备超高像素密度的液晶屏 2、同样大小的屏幕上显示的像素点由1个变为多个， retina只是高清显示屏的一种，现在主流旗舰机型都是高清显示屏。

• device Pixel Ratio （引用于白树博客）

  它是设备上物理像素和设备独立像素( device-independent pixels (dips) )的比例，即 devicePixelRatio = 屏幕物理像素/设备独立像素；

  例如iPhone4S，分辨率为：960×640，取屏幕宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio 值为 640px / 320px = 2，又如iPhone3，计算出来的 devicePixelRatio 值为 320px / 320px = 1

  那么，通过计算 devicePixelRatio 的值，是可以区分普通显示屏和高清显示器，当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏，当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏

  更多的可以参考张鑫旭大神的文章：《设备像素比devicePixelRatio简单介绍》

• <img> VS <css background-image>

  就我这种菜鸟来看，这两个其实都是图片，只不过css background-image可以用作于背景，介绍这两个牵扯到代码中图片该用什么写的问题，这里参考万能的stackoverflow: When to use IMG vs. CSS background-image?

解决方案

如果现有图片都用< img >，所以可以采用 Retina.js ； 原理还是查询设备替换图片。但是不太清楚这里是否牵扯到图片尺寸固定啥的，这个还需要设计师跟程序猿沟通一下才能确认方案是否可行。

如果图片是用 < css background-image >（这也是普遍的做法），解决方案引用白树博客

通过判断 devicePixelRatio 的值来加载不同尺寸的图片

针对普通显示屏(devicePixelRatio = 1.0、1.3)，加载一张1倍的图片

针对高清显示屏(devicePixelRatio >= 1.5、2.0、3.0)，加载一张2倍大的图片

.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);
  }
}

参考白树大神写的demo 根据devicePixelRatio显示不同款乔帮主