前端适配浏览器大屏,刷新切换不会变形(vue3+js)

实现逻辑

下面展示一些 内联代码片。

<script>
// 设计稿的宽度和高度，默认值为 1920x1080
let designWidthValue = 1920;
let designHeightValue = 1080;

// 获取当前窗口的宽度和高度
let innerWidth = window.innerWidth;
let innerHeight = window.innerHeight;

// 容器高度，初始值为设计稿的高度
let containerHeight = ref(`${designHeightValue}px`);

// 计算缩放比例，基于窗口高度与设计稿高度的比值，保留 3 位小数
let zoom = (innerHeight / designHeightValue).toFixed(3);

// 设计稿的宽度，根据缩放比例动态调整
let designWidth = ref(`${innerWidth / zoom}px`);

// 缩放比例，用于 CSS 的 transform: scale()
let scale = ref(`scale(${zoom})`);

// 监听窗口大小变化事件
window.addEventListener('resize', (e) => {
  // 当窗口大小变化时，先将设计宽度设置为 100vw，容器高度设置为 100vh，缩放比例设置为 1:1
  designWidth.value = `100vw`;
  containerHeight.value = '100vh';
  scale.value = `scale(1,1)`;

  // 如果窗口高度没有变化（即高度不变，只有宽度变化）
  if (e?.target?.innerHeight === innerHeight) {
    // 恢复容器高度为设计稿的高度
    containerHeight.value = `${designHeightValue}px`;
    // 根据当前窗口宽度和缩放比例重新计算设计宽度
    designWidth.value = `${innerWidth / zoom}px`;
    // 恢复缩放比例
    scale.value = `scale(${zoom})`;
  }
});

</script>

 <style scoped lang="scss">
.self-adaption-container {
  width: v-bind(designWidth);
  height: v-bind(containerHeight);
  overflow: hidden;
  transform: v-bind(scale);
  transform-origin: left top;
  position: relative;
  user-select:none;
</style>

(这块东西属于控制浏览器在刷新页面时页面不会随着放大缩小改变,永远保持原状)
// 监听窗口大小变化事件
window.addEventListener('resize', (e) => {
  // 获取当前窗口的宽度和高度
  innerWidth = window.innerWidth;
  innerHeight = window.innerHeight;

  // 计算缩放比例，基于窗口高度与设计稿高度的比值，保留 3 位小数
  zoom = (innerHeight / designHeightValue).toFixed(3);

  // 注释掉的代码：将设计宽度设置为 100vw，容器高度设置为 100vh
  // designWidth.value = `100vw`
  // containerHeight.value = '100vh'

  // 将缩放比例设置为 1:1，即取消缩放
  scale.value = `scale(1,1)`;

  // 打印当前窗口的高度，用于调试
  console.log(e?.target?.innerHeight);

  // 如果窗口高度没有变化（即高度不变，只有宽度变化）
  if (e?.target?.innerHeight === innerHeight) {
    // 恢复容器高度为设计稿的高度
    containerHeight.value = `${designHeightValue}px`;

    // 根据当前窗口宽度和缩放比例重新计算设计宽度
    designWidth.value = `${innerWidth / zoom}px`;

    // 恢复缩放比例
    scale.value = `scale(${zoom})`;
  }
});