关于物理像素

Posted 2021-03-24 purple-windbells

物理像素：设备屏幕实际拥有的像素点。比如iPhone 6的屏幕在宽度方向有750个像素点，高度方向有1334个像素点，所以iPhone 6 总共有750*1334个物理像素。

逻辑像素：也叫“设备独立像素”（Device Independent Pixel, DIP），可以理解为反映在CSS/JS代码里的像素点数。

设备像素比（Device Pixel Ratio, DPR）：一个设备的物理像素与逻辑像素之比。

比如在调试的时候iPhone 6上面显示375*667，但是实际打印出来的是750*1334，即增大了两倍，这是的dpr就是2了；

所以很有可能你的需求是画一条1px的线，但是最终显示出来的是2或者3px，以下两种办法可以解决物理像素问题

//第一种：比较麻烦，需要考虑将更新缩放比之后的页面元素，且这是的单位需要用rem
window.onload = function () {
  //像素比
  var dpr = window.devicePixelRatio
  console.log(dpr)
  //缩放比
  var scale = 1/dpr
  //通过meta将移动端的缩放比设置为现在的缩放比
  var metanode = document.querySelector(‘meta[name="viewport"]‘)
  metanode.setAttribute(‘content‘,‘width=device-width,initial-scale=‘+ scale+‘,user-scalable=no‘)
  //物理宽度
  var width = document.documentElement.clientHeight
  console.log(width)
  //将页面元素的大小缩放为之前
  var htmlNode = document.querySelector(‘html‘)
  htmlNode.style.fontSize = width * scale +‘px‘
}

<!--  //初始缩放比：initial-scale=1-->

//第二种方法：scale这种方法最为普遍
 .box {
      width: 200px;
      height: 200px;
      position: relative;
    }
    .box:before {
      content: ‘‘;
      position: absolute;
      left: 0;
      bottom: 0;
      height: 1px;
      width: 100%;
      background-color: #1b6d85;
    }
    @media screen and (-webkit-min-device-pixel-ratio: 2){
      .box:before {
        transform: scaleY(0.5);
      }
    }