[vue] 缩放比适配问题

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

解决方案为

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

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

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

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

html 复制代码
<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>
相关推荐
阿芯爱编程20 分钟前
最长和谐子序列,滑动窗口
前端·javascript·面试
你脸上有BUG39 分钟前
Css实现悬浮对角线边框动效
前端·css·动画
烛阴1 小时前
开发者神器:如何在浏览器控制台玩转第三方库,让调试效率翻倍!
前端·javascript
crary,记忆1 小时前
Module Federation 和 Native Federation 的比较
前端·webpack·angular
why技术1 小时前
翻译翻译,什么叫“编程专用”的显示器?
前端·后端
拉不动的猪2 小时前
JQ常规面试题
前端·javascript·面试
海上彼尚2 小时前
Monorepo + PNPM 搭建高效多项目管理
前端·js·源代码管理
Random_index2 小时前
#Uniapp篇:chrome调试&&unapp适配
前端·chrome·uni-app
新中地GIS开发老师2 小时前
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
javascript·arcgis·智慧城市·大学生·gis开发·webgis·地理信息科学