JavaScript zoom计算出固定宽度的整体网页按比例放大缩小

174 阅读1分钟
<body>
    <div id="main"> ... </div>
</body>

<script>
  function setScale() {
    let x = document.documentElement.clientWidth;//实际宽度

    // 数据点 这里的x1 y1 x2 y2 是需要先在两种比例宽度的网页上手动调出网页适合大小的zoom值进行公式。然后得出比例值,通过比例值把x获取到的实际宽度算出zoom值。这是原理。
    var x1 = 1903, y1 = 1;
    var x2 = 1406, y2 = 0.73;

    // 计算斜率和截距
    var m = (y2 - y1) / (x2 - x1);
    var b = y1 - m * x1;

    // 计算 zoom
    var zoom = m * x + b;

    document.querySelector('#main').style.zoom = zoom;
  }
  window.onresize = function () {
    setScale()
  };
  window.onload = function () {
    setScale()
  };

</script>

PixPin_2023-12-16_00-54-20.gif