1PX问题

产生原因

• 存在设备像素比：

设备像素比（DPR）: 设备像素比 = 设备像素 / 设备独立像素

• 设备像素是物理像素，也就是屏幕上有多少个逻辑点受你控制
• 设备独立像素是逻辑像素，可以理解成屏幕的长宽
• DPR等于2即表示，1px的宽度，用了屏幕里的两个像素点来显示
• CSS代码里写的像素，在移动端，对应的就是物理像素
• 而由于UED出图是按照逻辑像素出图的，所以如果按照UED里的像素写，就会导致最终渲染出来1PX的样式比设计图要粗，因为假设是在DPR等于2的情况下，UED的1PX对应物理像素的0.5PX，但你写了1PX，就变粗了
• 那么直接把所有UED的尺寸都除DPR可以解决问题吗？显然还是会有问题，特别是安卓机型上，因为他能识别的最小像素是1，0.5px会被忽略，导致在安卓机型上，你设置了0.5px的边框，但是最终渲染却没有边框

解决方案

• 设置viewport以及rem

<meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

var viewport = document.querySelector("meta[name=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.333333333, maximum-scale=0.333333333, minimum-scale=0.333333333, user-scalable=no')
}    

var docEl = document.documentElement;    
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';    
docEl.style.fontSize = fontsize;

• 通过获取DPR，动态的对viewport进行缩放，比如DPR = 2，缩放比例就是0.5，通过缩小0.5倍，原本1：1比例下会变宽的像素，就能正常展示了
• 后续的设置fontSize是为了适配不同的屏幕宽度，这样处理后fontSize是根据屏幕宽度变化的，占屏幕宽度的比例是固定的，而1rem即等于根元素的fontSize，所以后续用rem写的css在不同屏幕宽度下的渲染都是一致的