Solução de escala de problema de adaptação de tela grande

princípio:

 A largura da tela excede ou a altura excede, o que é calculado por cálculo, e a escala é dimensionada de acordo com a taxa de dimensionamento calculada.

Mas não sei porque a largura e a altura não são preenchidas em 100%! ! ! ? ?

escrita setLayout montada e função:

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
      );
    };

Otimize de acordo com o projeto

A seguir está a parte do código montada e a parte em setLayoput é modificada para o mesmo conteúdo

A diferença do anterior é

    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`;
    };