老师，帮忙看下为什么maxWidth、minWidth不起作用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>通用适配实现</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    .header-container {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: red;
      border-bottom: 1px solid #000;
    }
  </style>
  <script>
    (function() {
      'use strict';

      let docEl = document.documentElement;
      let ratio = 18.75;
      let viewportEl = document.querySelector('meta[name="viewport"]');
      let dpr = window.devicePixelRatio || 1;
      dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);
      // header-container 最大、最小宽度
      let maxWidth = 540,
          miniWidth = 360;

      // 方便在html里面进行观察，设备像素、物理像素百分比
      docEl.setAttribute('data-dpr', dpr);
      docEl.setAttribute('max-Width', maxWidth);
      docEl.setAttribute('min-Width', 9);

      // 缩放比（注意计算技巧的理解）
      let scale = 1 / dpr;
      // viewport中 content 属性的内容
      let content = 'width=device-width, initial-scale='+ scale +', maximum-scale='+ scale +', minimum-scale='+ scale +', user-scalable=no';

      // 判断viewportEl 是否存在
      if(viewportEl) {
        viewportEl.setAttribute('content', content);
      }else {
        let viewportEl = document.createElement('meta');
        viewportEl.setAttribute('name', 'viewport');
        viewportEl.setAttribute('content', content);

        // 节点上树
        document.head.appendChild(viewportEl);
      }

      setUnitRem();

      window.onresize = setUnitRem;

      function setUnitRem() {
   
        let viewWidth = docEl.clientWidth || window.innerWidth || docEl.getBoundingClientRect().width;

        if(maxWidth && (viewWidth / dpr > maxWidth)) {
          viewWidth = maxWidth * dpr;
        }else if(miniWidth && (viewWidth / dpr < miniWidth)) {
          viewWidth = miniWidth * dpr;
        }

        docEl.style.fontSize = viewWidth / ratio + 'px';
      }
    })();
  </script>
</head>
<body>
  <div class="header-container"></div>
</body>
</html>

帅得无心敲代码 2022-01-07

源自：移动端屏幕适配 3-2 通用适配实现