大屏适配：scale

方案一：直接根据宽度的比率进行缩放。（宽度比率=网页当前宽 / 设计稿宽）

 1 <script>
 2 window.onload = function () {
 3   triggerScale();
 4   window.addEventListener("resize", function () {
 5     triggerScale();
 6   });
 7 };
 8 
 9 function triggerScale() {
10   var targetX = 1920;
11   var targetY = 1080;
12 
13   // 获取html的宽度和高度（不包含滚动条）
14   var currentX =
15     document.documentElement.clientWidth || document.body.clientWidth;
16   // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth
17   var currentY =
18     document.documentElement.clientHeight || document.body.clientHeight;
19 
20   // 1.缩放比例  3840 / 2160 => 2
21   var ratio = currentX / targetX;
22 
23   var bodyEl = document.querySelector("body");
24   // 2.需要修改缩放的原点 body { transform-origin: left top; }
25   bodyEl.setAttribute("style", `transform:scale(${ratio})`);
26 }
27 </script>

方案二：动态计算网页宽高比，决定是是否按照宽度的比率进行缩放。

<script>
window.onload = function () {
  triggerScale();
  window.addEventListener("resize", function () {
    triggerScale();
  });
};

function triggerScale() {
  var targetX = 1920;
  var targetY = 1080;
  var targetRatio = 16 / 9;
  var currentX =
    document.documentElement.clientWidth || document.body.clientWidth;
  var currentY =
    document.documentElement.clientHeight || document.body.clientHeight;

  // 1.缩放比例  3840 / 2160 => 2
  var ratio = currentX / targetX;
  var currentRatio = currentX / currentY;
  var transformStr = "";
  if (currentRatio > targetRatio) {
    ratio = currentY / targetY;
    transformStr = `transform:scale(${ratio}) translateX(-${
      targetX / 2
    }px); left:50%;`;
  } else {
    transformStr = `transform:scale(${ratio})`;
  }
  var bodyEl = document.querySelector("body");
  // 2.需要修改缩放的原点 body { transform-origin: left top; }
  bodyEl.setAttribute("style", transformStr);
}
</script>