1px边框问题

(function () {
  const maxWidth = 540; //不考虑缩放和dpr
  const minWidth = 320;
  let dpr = window.devicePixelRatio || 1;
  //dpr可能是小数，要化为整数
  dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
  function setRem() {
    //获取html的dom元素
    const domEl = document.documentElement;
    //clientWidth就是屏幕的物理像素宽能够代表的css像素宽，在initial-scale为1时，物理像素为375->css像素也为375
    //initial-scale为2时，css像素变为750
    let cliWidth = domEl.clientWidth;
    if (maxWidth && (cliWidth / dpr > maxWidth)) {
      cliWidth = maxWidth * dpr;
    } else if (minWidth && (cliWidth / dpr < minWidth)) {
      cliWidth = minWidth * dpr;
    }
    //当initial-scale改变的时候，获取到的cliWidth会
    domEl.style.fontSize = (cliWidth / 375) * 20 + 'px';
    console.log("fontSize", (cliWidth / 375) * 20);

  }
  //设置缩放解决dpr不为1的情况
  const docEl = document.documentElement;
  docEl.setAttribute("data-dpr", dpr);
  //如dpr=2 -->一个css像素用了2个物理像素 --> 所以要缩小1倍 即 1/2
  const scale = 1 / dpr;
  const content = `width=device-width, initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale},user-scalable=no`
  const meta = document.querySelector('meta[name=viewport]');
  if (meta) {
    meta.setAttribute('content', content)
  } else {
    meta = document.createElement('meta');
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', content);
    document.head.appendChild(meta);
  }
  setRem()
  window.onresize = setRem;
})();