[vue] 缩放比适配问题_vue样式适配缩放-优快云博客

本文链接：https://blog.youkuaiyun.com/JianShengShuaiest/article/details/146024723

在开发前端页面的时候经常会发生不同用户存在不同缩放比的问题.
解决方案为

第一步, 在html标签中添加缩放锚点,及隐藏对应的滑块

项目刚开始对于lang是没有设置的 , 这里我们设置成zh-CN,后续的最关键内容为transform-origin: 0 0;这样就保证了在缩放的时候不会乱跑.
在这里插入图片描述

<html lang="zh-CN" style="margin: 0px; transform-origin: 0 0; width: 1920px; overflow: hidden">

第二步,在vue入口地方加入对缩放的监听,并根据当前的状态进行处理

在这里插入图片描述

方法一

<script>
export default {
  name: 'App',
  methods: {
    updateScale() {
      // 设置transform原点并应用缩放补偿
      document.documentElement.style.transform = `scale(${window.innerWidth / 1920})`;
    }
  },
  mounted() {
    this.updateScale();
    window.addEventListener('resize', this.updateScale);
  },
}
</script>

方法二

<script setup>
import { RouterView } from 'vue-router';
import { onMounted, onBeforeUnmount } from 'vue';

const updateScale = () => {
  // 设置transform原点并应用缩放补偿
  document.documentElement.style.transform = `scale(${window.innerWidth / 1920})`;
  document.documentElement.style.transformOrigin = 'top left';
};

onMounted(() => {
  updateScale();
  window.addEventListener('resize', updateScale);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScale);
});
</script>