針對筆記本電腦系統默認縮放為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)`
    }
  }
})