产生起因

  • 存在设施像素比：
设施像素比（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在不同屏幕宽度下的渲染都是统一的