移动端1px问题

造成原因

在以前，css的1px就是物理像素1px，但是由于现在手机屏幕变为高清屏幕，屏幕尺寸没变，但是像素点变多了，导致CSS 中的 1px 并不能和移动设备上的 1px 划等号。
设备像素比：window.devicePixelRatio = 设备的物理像素 / CSS像素，意味着css中写的border: 1px实际就是1px * window.devicePixelRatio = 2px，实际展示2个物理像素，看起来会粗一点。

解决方案

1. 伪元素先放大后缩小(伪元素scale)

// 1px的border
div {
  position: relative;
  height: 30px;
}
::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 200%; 
  height: 200%; 
  border: 1px solid red;
  transform: scale(0.5); 
  transform-origin: 0 0;
}

2. 设置viewport解决问题(viewport+rem+js)

<script type="text/javascript">
   let viewport = document.querySelector('meta[name=viewport]')
   //下面是根据设备像素设置viewport
   if (window.devicePixelRatio == 1) {
       viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no')
   }
   if (window.devicePixelRatio == 2) {
       viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no')
   }
   if (window.devicePixelRatio == 3) {
       viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no')
   }
   function resize() {
       let width = screen.width > 750 ? '75px' : screen.width / 10 + 'px'
       document.getElementsByTagName('html')[0].style.fontSize = width
   }
   window.onresize = resize
</script>