笔记本在100%~150%缩放率或者小分辨率下保持系统正常显示

• 封装fixZoom.js

备注：使用vh和vw的样式需要根据 缩放比例重新计算
eg：height: calc(100vh / var(–zoom));

import debounce from 'lodash/debounce'

const FIX_ZOOM_MIN = 0.75
const FIX_ZOOM_MAX = 1
let bodyZoomClass = ''
var isMobile = navigator.userAgent.match(
  /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
)

function getZoomValue () {
  if (isMobile) return 1
  const zoom = window.screen.width / 1920
  return Math.max(FIX_ZOOM_MIN, Math.min(zoom, FIX_ZOOM_MAX))
}

const initFun = debounce(function () {
  const zoomValue = getZoomValue()

  // 获取宽度时获取修复后的宽度，防止浮窗错位的问题
  Object.defineProperty(document.documentElement, 'clientWidth', {
    configurable: true,
    get () {
      return innerWidth / zoomValue
    }
  })
  Object.defineProperty(document.documentElement, 'clientHeight', {
    configurable: true,
    get () {
      return innerHeight / zoomValue
    }
  })
  const htmlElement = document.querySelector('html')
  htmlElement.style.setProperty('--zoom', zoomValue)

  bodyZoomClass = `zoom-${zoomValue * 100}`
  const classList = document.body.classList.value.split(' ').filter(item => !item.includes('zoom-') && item)
  classList.push(bodyZoomClass)
  document.body.classList.value = classList

  // 首先通过 css zoom 属性重置缩放效果为 100%
  document.body.style.zoom = zoomValue
}, 100)

// 重置
export function resetFun () {
  const htmlElement = document.querySelector('html')
  htmlElement.style.removeProperty('--zoom')
  document.body.style.removeProperty('zoom')

  const classList = document.body.classList.value.split(' ').filter(item => !item.includes('zoom-') && item)
  document.body.classList.value = classList
  bodyZoomClass = ''
}
export default initFun