[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>
相关推荐
高山我梦口香糖7 分钟前
[electron]预脚本不显示内联script
前端·javascript·electron
神探小白牙7 分钟前
vue-video-player视频保活成功确无法推送问题
前端·vue.js·音视频
Angel_girl3191 小时前
vue项目使用svg图标
前端·vue.js
難釋懷1 小时前
vue 项目中常用的 2 个 Ajax 库
前端·vue.js·ajax
Qian Xiaoo1 小时前
Ajax入门
前端·ajax·okhttp
爱生活的苏苏1 小时前
vue生成二维码图片+文字说明
前端·vue.js
拉不动的猪1 小时前
安卓和ios小程序开发中的兼容性问题举例
前端·javascript·面试
炫彩@之星2 小时前
Chrome书签的导出与导入:步骤图
前端·chrome
贩卖纯净水.2 小时前
浏览器兼容-polyfill-本地服务-优化
开发语言·前端·javascript
前端百草阁2 小时前
从npm库 Vue 组件到独立SDK:打包与 CDN 引入的最佳实践
前端·vue.js·npm