關於物理像素

物理像素：設備屏幕實際擁有的像素點。好比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);
      }
    }