<!DOCTYPE html>
<html lang="">

<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">
  <title>userSide</title>
  <!-- <script>   
    this.resizeTo(800,600);   
    this.focus();   
    </script>   -->
</head>

<body>

  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
  <script>
    window.onresize = () => {
      let targetWidth = 1600;
      // 2.拿到当前设备（浏览器）的宽度
      // document.documentElement  获取html的宽度
      let currentWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      console.log(currentWidth)
      // 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
      let scaleRatio = currentWidth / targetWidth;
      let fontSize = (currentWidth / targetWidth) * 100;
      // 4.开始缩放网页
      console.log(scaleRatio,fontSize, 'scaleRatio')
      // 4.开始缩放网页
      console.log(scaleRatio,'scaleRatio')
      // document.body.style = `zoom:${scaleRatio}`;
      console.log(document.body, ' document.body')
    }
  </script>
</body>

</html>