dpi-dpr区别 #

dpi #

设备像素，又称设备物理像素

dpr #

设备像素比。表示 1 个 CSS 像素（宽度）等于几个物理像素（宽度）

DPR = 物理像素数 / 逻辑像素数 // 在某一方向上，x方向或者y方向

js 获取 dpr

// 这里获取到的是一个小数
window.devicePixelRatio

如：iPhone6 的 dpr 为 2 ，物理像素 750（x 轴）,则它的逻辑像素为 375

iPhone6 为标准的设计稿是 750px，而不是 375px

布局视口跟理想视口的一致的时候，用户看到的效果最佳，以 iphone6 来说，他的视口宽度为 375px，视口的像素单位是逻辑像素 ，我们知道 UI 设计稿的的像素单位就是按照 设备像素来的 ,所以按照 DPR 为 2 换算成物理像素为 750px ，显然没问题（PS:DPR 为 1 或者为 3 的，通常处理都是取为 2，折中处理，适应各种机型）

后端返回的图片如何进行适配 #

给图片返回接口，传入dpr，后端根据dpr的值返回对应的多倍图, 前端直接设置即可