Large screen adaptation problem scale solution

principle:

 Either the width of the screen exceeds, or the height exceeds, which is calculated by calculation, and the scale is scaled according to the calculated scaling ratio.

But I don't know why the width and height are not filled at 100%! ! ! ? ?

mounted and function setLayout writing:

setLayout() {
      let designWidth = 1746; //设计稿的宽度，根据实际项目调整
      let designHeight = 950; //设计稿的高度，根据实际项目调整
      // 自适应分两种情况 1、宽度不够 2、高度不够
      let ratio =
        document.documentElement.clientWidth /
          document.documentElement.clientHeight <
        designWidth / designHeight;
      let scale = ratio
        ? document.documentElement.clientHeight / designHeight
        : document.documentElement.clientWidth / designWidth;
      console.log(document.documentElement.clientHeight);
      let a =
        scale > 1
          ? 1
          : (document.querySelector(
              "#iocp"
            ).style.transform = `scale(${scale})`);
      // 设置缩放中心为上边中间
      document.querySelector("#iocp").style.transformOrigin = `top center`;
      console.log(
        scale,
        "scale",
        document.documentElement.clientHeight / designHeight
      );
    }
  },
  mounted() { 
    this.setLayout();
    window.onresize = function() {
      let designWidth = 1746; //设计稿的宽度，根据实际项目调整
      let designHeight = 950; //设计稿的高度，根据实际项目调整
      // 自适应分两种情况 1、宽度不够 2、高度不够
      let ratio =
        document.documentElement.clientWidth /
          document.documentElement.clientHeight <
        designWidth / designHeight;
      let scale = ratio
        ?document.documentElement.clientWidth / designWidth
          :document.documentElement.clientHeight / designHeight;

      let a =
        scale > 1
          ? 1
          : (document.querySelector(
              "#iocp"
            ).style.transform = `scale(${scale})`);
      // 设置缩放中心为上边中间
      document.querySelector("#iocp").style.transformOrigin = `top center`;
      console.log("+++ratio,scale+++", ratio, scale);
      console.log(
        "--height--",
        document.documentElement.clientHeight,
        designHeight
      );
      console.log(
        "--width--",
        document.documentElement.clientWidth,
        designWidth
      );
    };

Optimize according to project

The following is the code part in mounted, and the part in setLayoput is modified to the same content

The difference from the above is

    window.onresize = function() {
      let designWidth = 1920; //设计稿的宽度，根据实际项目调整
      let designHeight = 1080; //设计稿的高度，根据实际项目调整
      // 自适应分两种情况 1、宽度不够 2、高度不够
      // true说明宽度不够，false说明高度不够
      let ratio = document.documentElement.clientHeight > designHeight;
      //本项目的宽度通过百分比已经能适配了，所以本次缩放只考虑高度上
      // 如果高度小于设计稿的高度进行缩放，如果高度大于设计稿的高度不缩放，缩放比例设置为1，因为1是显示不变形的最好高度
      let scale = ratio
        ? 1
        : document.documentElement.clientHeight / designHeight;
      console.log(
        "scale",
        ratio,
        scale,
        document.documentElement.clientWidth,
        document.documentElement.clientHeight
      );
      document.querySelector("#iocp").style.transform = `scaleY(${scale})`;
      // 设置缩放中心为上边中间
      document.querySelector("#iocp").style.transformOrigin = `top center`;
    };