vue前端项目适配缩放125%

一、需求：开发都是在缩放100%情况下编码，但是用户的电脑绝大多数是缩放125%，导致页面出现滚动条，字体大小错误，所以需要做适配。

二、解决思路：可以先获取电脑当前缩放值，再用100除以这个值，得到zoom值，再将全局的body.style.zoom赋值

1.创建detectZoom.js文件

// detectZoom.js
export const detectZoom = () => {
  let ratio = 0
  const screen = window.screen
  const ua = navigator.userAgent.toLowerCase()
  if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio
  } else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI
    }
  } else if (
    window.outerWidth !== undefined &&
    window.innerWidth !== undefined
  ) {
    ratio = window.outerWidth / window.innerWidth
  }
  if (ratio) {
    ratio = Math.round(ratio * 100)
  }
  return ratio
}

2.在main.js使用这个文件

// 处理笔记本系统默认系统比例为125%或150%带来的布局影响
import { detectZoom } from '@/utils/detectZoom'
const m = detectZoom()
document.body.style.zoom = 100 / Number(m)
console.log(document.body.style.zoom, '当前zoom')

可以看到当前页面显示正常，没有出现滚动条，字体大小也正常