h5手机图片适配的问题

参考：http://mdsa.51cto.com/art/201507/484215.htm
基于http://www.jianshu.com/p/7179c36a682f
我们知道，同样的100px＊100px的图片在bybrid软件以及大部分wap网页中是以
100dpr＊dpr的像素大小来呈现的。
同样的100100的图片，在retina屏幕中，1像素的位图对应4像素的物理像素，这种情况下，会就近取色

Paste_Image.png

这样会造成模糊

所以对于高清图片，为了避免就近取色，导致图片模糊，比较好的方法是采用两倍图片的方式。
如果在普通屏幕下用两倍图片，200×300(css pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是200×300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。

Paste_Image.png

对于不同手机屏幕下载不同尺寸的图片可以通过媒体查询做到：@media
通过不同的URl使图片尺寸在服务器端处理。