页面按宽（高）等比例缩放方案以及存在的弊端

方案

按宽等比例缩放zoom （不建议）

这里使用zoom对页面进行缩放。zoom:0.5 （缩放50%），zoom:2（放大两倍）

不过会出现的问题是 1920/1080 (16:9),如果显示区域的比例不是16:9，那么会出现一个问题就是；高度为了适应宽度，会导致垂直方向显示不全；页面下方会出现高度不等的白条；

使用zoom属性也存在一些坏处，包括可能导致页面元素的比例失调，特别是当页面中使用了一些第三方组件时，缩放可能会导致这些组件的功能失效或出现偏移现象。此外，使用zoom属性还可能引入一些难以预料的bug，影响用户体验和页面的稳定性‌

mounted() {
    let that = this;
    // 监听页面的窗口的变化，每次窗口变化调用等比例缩放方法
    that.bodyScale();
    window.addEventListener("resize", that.bodyScale, false);
},
bodyScale() {
      var deviceWidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      var scale = deviceWidth / 1920; // 分母——设计稿的尺寸
      document.documentElement.style.zoom = scale; //放大缩小相应倍数
    },

按宽高等比例缩放scale（不建议）

1.新建文件utilsDram.js

export function useIndex (appRef) {
  // * appRef指向最外层容器

  // * 定时函数
  let timer = null
  // * 默认缩放值
  const scale = {
    width: '1',
    height: '1'
  }
  // * 设计稿尺寸（px）
  const baseWidth = 1920
  const baseHeight = 1080

  // * 需保持的比例（默认2）
  // const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
  const baseProportion = 2
  const calcRate = () => {
    // 当前宽高比
    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
    if (appRef) {
      if (currentRate > baseProportion) {
        // 表示更宽
        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
        scale.height = (window.innerHeight / baseHeight).toFixed(5)
        appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      } else {
        // 表示更高
        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
        scale.width = (window.innerWidth / baseWidth).toFixed(5)
        appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
      }
    }
  }

  const resize = () => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      calcRate()
    }, 200)
  }

  // 改变窗口大小重新绘制
  const windowDraw = () => {
    window.addEventListener('resize', resize)
  }

  return {
    appRef,
    calcRate,
    windowDraw
  }
}

2.当前页面引用

import { useIndex } from "./components/utilsDram.js";
mounted() {
    let that = this;    // 监听页面的窗口的变化，每次窗口变化调用等比例缩放方法
    const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
    calcRate();
    windowDraw();
}

问题是不够完美，如果显示区域的比例不是16:9。两种情况：

1. 宽度更大，高度为了适应宽度，会导致垂直方向显示不全，需要上下滚动显示。这个就改成以高度为基准。上面的 场景假设 有提到。
2. 高度更大，或者使用了1的解决方法。因为显示区域不是16:9，而设计稿是16:9，总会有部分区域不属于主容器，那这部分区域就是白色的很难看，像这样：

按高比例缩放（建议）

<template>
  <div class="fullscreen-container">
    <div class="content">
      <!-- 这里放置你的内容 -->
    </div>
  </div>
</template>


<script>
export default {
  name: 'FullscreenContainer',
  data() {
    return {
      // 设定的高比例，例如16:9
      aspectRatio: 9 / 16
    };
  },
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      const height = window.innerHeight;
      const width = height * this.aspectRatio;
      document.documentElement.width = `${width}px`;
      document.documentElement.height = `${height}px`;
    }
  }
};
</script>

其他

mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
},
// 屏幕宽度响应
const handleResize = () => {
  // 设计稿:  1920 * 1080
  // 目标适配:  1920 * 1080   3840 * 2160 ( 2 * 2 ) ;  7680 * 2160( 4 * 2)

  // 1.设计稿的尺寸
  let targetX = 2560;
  let targetY = 1440;
  //   let targetX = 1920;
  //   let targetY = 1080;
  let targetRatio = 16 / 9; // 宽高比率

  // 2.拿到当前设备(浏览器)的宽度
  let currentX = document.documentElement.clientWidth || document.body.clientWidth;
  let currentY = document.documentElement.clientHeight || document.body.clientHeight;
  //  1920 * 1080  -> 3840 * 2160

  // 3.计算缩放比例
  let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
  let currentRatio = currentX / currentY; // 宽高比率

  // 超宽屏
  if (currentRatio > targetRatio) {
    // 如果当前设备的宽高比率大于设计稿的宽高比率,那么就以高度为参照进行缩放，并且居中显示
    scaleRatio = currentY / targetY;
    document.body.style = `width:${targetX}px; height:${targetY}px;position:fixed;transform: scale(${scaleRatio}) translateX(-50%);left:50%;transform-origin: left top;`;
  } else {
    // 4.开始缩放网页
    document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio});transform-origin: left top;`;
  }
};