在开发前端页面的时候经常会发生不同用户存在不同缩放比的问题.
解决方案为
第一步, 在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>
