大屏缩放适配且居中

<template>
  <div class="daping">
    <body ref="home">
      <div class="continersascrss">
        <div id="container"></div>
      </div>
    </body>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

const home = ref(null);
const changesizeFn = () => {
  var w = window.innerWidth; //获取窗口宽度
  var h = window.innerHeight; //获取窗口高度
  const w_w = home.value.offsetWidth; //获取元素宽度
  const h_h = home.value.offsetHeight; //获取元素高度
  let num = 0;
  w / h > w_w / h_h ? (num = h / h_h) : (num = w / w_w);
  // 窗口宽/窗口高>元素宽/元素高
  home.value.style.transform = `translate(-50%, -50%) scale(${num})`;
};
onMounted(() => {
  changesizeFn();
  window.addEventListener("resize", changesizeFn);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", changesizeFn);
});
</script>

<style lang="scss" scoped>
.continersascrss {
  width: 100%;
  height: 1080px;
  background-color: #999;
}
</style>
<style lang="scss">
.daping {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  body {
    width: 1920px;
    height: 1080px;
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    right: 50%;
    bottom: 50%;
    transition: all 0.5s;
  }
}
</style>

大屏适配不居中

<template>
  <body>
    <div class="continersascrss">
      <div id="container"></div>
    </div>
  </body>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

const changesizeFn = () => {
  const targetWidth = 1920;
  const targetHeight = 1080;
  const targetRatio = 16 / 9; // 宽高比率 （宽 / 高）
  // 2.拿到当前设备（浏览器）的宽度
  const currentWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  const currentHeight =
    document.documentElement.clientHeight || document.body.clientHeight;
  // 3.计算缩放比率(屏幕过宽，根据高度计算缩放比例)
  let scaleRatio = currentWidth / targetWidth; // 参照宽度进行缩放（默认情况下）
  // 当前宽高比例
  const currentRatio = currentWidth / currentHeight;

  if (currentRatio > targetRatio) {
    scaleRatio = currentHeight / targetHeight; // 参照高度进行缩放（屏幕很宽的情况下）
    document.body.style = `transform: scale(${scaleRatio}) translateX(-50%); left: 50%;`;
  } else {
    // 4.开始缩放网页
    document.body.style = `transform: scale(${scaleRatio})`;
  }
};
onMounted(() => {
  changesizeFn();
  window.addEventListener("resize", changesizeFn);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", changesizeFn);
});
</script>

<style lang="scss">
.continersascrss {
  width: 100%;
  height: 1080px;
  background-color: #999;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  width: 1920px;
  height: 1080px;
  /* 设置缩放原点 */
  transform-origin: left top;
  box-sizing: border-box;
}
</style>

大屏缩放适配且居中

大屏缩放适配且居中

大屏适配不居中

悦读