物理像素：设备屏幕实际拥有的像素点。比如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); } }
原文：https://www.cnblogs.com/purple-windbells/p/11742932.html