针对笔记本电脑系统默认缩放为150%导致页面放大解决方案

不建议为任何人实现该功能！

因为 使用第一种方法后，对我项目的echarts的定位等有影响，故而最后我选择了第二种解决办法

解决办法

第一种(不推荐)：使用zoom 方案（zoom默认有缩放浏览器功能）不兼容Safari/Firefox

第一步：main.js 页面添加以下代码，动态计算需设置的zoom变量值

const dpr = window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI;
const preferWidth = 1750 //预期值
let zoom = 1
if (dpr > 1) { // 用户有放大，我们再做缩放
  const screenWidth = window.screen.width // 我们是针对屏幕进行缩放的，不是针对浏览器
  if (screenWidth < preferWidth) { // 屏幕小于预期值才执行
    zoom = screenWidth / preferWidth // 得到缩放倍数
    document.documentElement.style.zoom = zoom
  }
}
//设置css变量值
document.documentElement.style.setProperty('--zoom', zoom)
document.documentElement.style.setProperty('--full-height', window.innerHeight)

对于项目中有使用 vw、vh单位的代码，须要将这些单位都除以上边代码设置的zoom比例，引出第二步

第二步：修改css代码，例如：

.el-main {
   min-height: calc(100vh / var(--zoom));
   width: calc(100vw / var(--zoom));
   height: calc(100vh / var(--zoom));
 }

第二种：使用transform

1 非移动端/pad 才需缩小
2 系统放大比例大于100%才需缩小
3 最后使用transform:scale 按放大比例缩小

var browser = {
  versions: function () {
      let u = navigator.userAgent;
      return {//移动终端浏览器版本信息
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
      };
    }(),
  }
  let { versions } = browser
  if (versions.mobile || versions.ios || versions.android || versions.iPad) return false

  const dpr = window.devicePixelRatio || window.screen.deviceXDPI / window.screen.logicalXDPI;
  const preferWidth = 1750
  let zoom = 1
  if (dpr > 1) { // 用户有放大，我们再做缩放
    const screenWidth = window.screen.width // 我们是针对屏幕进行缩放的，不是针对浏览器
    if (screenWidth < preferWidth) { // 屏幕小于预期值才执行
      zoom = screenWidth / preferWidth // 得到缩放倍数
      //下方细节自行修改
      document.getElementById('zoom-container').style['transform'] = 'scale(' + zoom + ')'
      document.getElementById('zoom-container').style['transform-origin'] = 'center top'
      document.getElementById('zoom-main').style.height = `calc(${100 / zoom}vh - 101px)`
      document.getElementById('zoom-main').style['min-height'] = `calc(${100 / zoom}vh - 101px)`
    }
  }
})