解决在不同DPR(设备像素比)的大屏幕显示出错或显示不全问题。

项目场景：

****
编写一个适配超大屏幕的大数据看板页面，用的适配方案是 rem+flexible.js，但是遇到不同DPR设备像素比（设备设置中可能叫”密度“一般为240或者360（如果有误请麻烦提醒，谢谢各位）时会出现显示不全，其实也就是由于不同DPR造成的缩放问题。

---

问题描述：

解决在不同DPR(设备像素比)的大屏幕显示出错或显示不全问题。如果有其他解决方法请劳烦留下评论，十分感谢。

---

原因分析：

     什么是 DPR？
      dpr是设备上物理像素 (physical pixels) 和设备无关像素 (device-independent pixels (dips)) 的比例。即：
      设备像素比 = 物理像素 / 设备独立像素；

css中设置的1px，是虚拟像素，在移动屏上，drp是1的情况下，边框是正好1:1覆盖的，但比如iPhone 6s上的drp是2，css的1像素实际上在屏幕上要覆盖两倍的物理像素。
所以才会导致在不同DPR设备上显示有问题，有点像是被缩放一样。所以其实只要调整下缩放就能解决问题。

解决方案：

解决方案有两种，本人用的第一种。

1. 通过js获取当前DPR的值去动态改变 initial-scale 值，也就是缩放值。
   众所周知在js可以用 window.devicePixelRatio 中获取当前屏幕DPR的值。

var scale= 1 / window.devicePixelRatio;
document.write('<meta name="viewport" content="width=device-width,initial-scale=' + scale + ',' + 'minimum-scale=' + pixel + ',' + 'maximum-scale=' + scale + '">')

用以上代码代替

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

即可解决。

2. 如果只是单独某个样式出现问题那么可以直接用css去对在不同DPR设备中独立的样式。
   在css中获取当前屏幕DPR的值

获取dpr的方式：
  		-webkit-device-pixel-ratio
        -webkit-min-device-pixel-ratio
        -webkit-max-device-pixel-ratio
        
css单独设置样式解决：
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
    &::after
      transform scaleY(0.7)
      -webkit-transform scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      transform scaleY(0.5)
      -webkit-transform scaleY(0.5)

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
  .border-1px
    &::after
      transform scaleY(0.3)
      -webkit-transform scaleY(0.3)

以上就是解决方案，希望如果有误的地方或者有更好的解决方案劳烦评论这对我很重要，谢谢大家。

下面是我解决该问题时找到的一些关于DPR相关的一些链接，谢谢各位~

移动web开发DRP问题

移动设备分辨率

前端工程师需要明白的「像素」