普通显示屏：旧手机，iPhone3，在屏幕上能看到物理像素点
高清显示屏（视网膜屏、retina屏幕）：可以把更多的像素点压缩到一块屏幕内，基本看不到物理像素点了，如iPhone4，
iPhone3和iPhone4的屏幕宽度都是320px，前者分辨率320*280，而后者640*960，后者的像素密度更大，以至于肉眼基本看不到像素点了
对于普通显示屏，1px对应一个像素点。
高清显示屏内1px对应2个像素点了，
对于更加高清的屏幕，如iPhone6plus，1px对应3个像素点
以上的对应关系，有个名词来形容，物理像素比，dpr。
屏幕之间1px对应不同数量的像素点，这个差异会导致一个问题：
1px*1px的图片显示到1dpr的屏幕上能正常显示（对应1个像素点），但是显示到2dpr的屏幕上时这个图片就会对应2个像素点，每个像素点内的图片质量就降低了，相当于把图片放大为原来的2倍了，会导致图片失真。
解决办法：既然以上的图片被放大为原来的两倍导致了失真，那我把页面缩小为原来的0.5倍，图片显示起来就没问题了，相当于还原了
实现过程就是通过viewport的initial-scale来设置，也就是说通过屏幕的dpr来动态设置这个值，这是一种viewport的非标准化设置，淘宝的页面就是这样做的。但是对于大部分的页面都是采用viewport的标准化设置，但这会导致图片失真问题，解决方式压缩后再显示
对于400*400的精灵图，设置bg-size:200 200 把图片缩小一半，然后再设置position来显示即可
假如设计稿上的图标是40*40的，那给的素材就应该是80*80的