大屏/门户页面兼容各种分辨率或电脑缩放

需求要求: 需要支持缩放功能(缩放后 页面各元素模块正常展示)、 需要适配各种分辨率(初始加载不应出现横向滚动条)

选择的实现方案

利用 zoom 或者 transform 来缩放兼容页面样式，不动业务模块代码

    const isMobile = /iPhone|iPad|iPod|Android|Harmony/i.test(navigator.userAgent) // 手机端
    const canUseZoom = !isMobile && !/Firefox|KaiOS|Opera/i.test(navigator.userAgent) // 能使用 zoom 的浏览器
    this.getScaleListener(canUseZoom)

    getScaleListener(canUseZoom) {
      const devicewidth = document.documentElement.clientWidth
      if (devicewidth === 1920) return // 根据设计稿实际强开来
      // 如果需要以高度为标准的话可以打开下面注释的
      // const deviceheight = document.documentElement.clientHeight
      const scaleX = devicewidth / 1920
      // const scaleY = deviceheight / 919
      // const scale = Math.min(scaleX, scaleY)
      let scale = +scaleX.toFixed(4)
      document.body.style.setProperty(`--zoom`, scale)
      let myStyle = document.createElement('STYLE')
      myStyle.setAttribute('id', 'myScaleStyle')
      const minHeight = 100 / scale
      let styleTextNode = document.createTextNode(`
        #app {
          width: 1920px;
          margin: 0 auto;
          box-sizing: border-box;
          ${canUseZoom ? `
            zoom: var(--zoom)
            ` : `
            position: absolute;
            left: 50%;
            transform: scale(var(--zoom)) translateX(-50%);
            transform-origin: 0 0;
          `}
        }
        ${canUseZoom ? `
          .el-tooltip__popper, .el-popper {
            zoom: var(--zoom);
          }
          ` : `.el-tooltip__popper, .el-popper {
            transform: scale(var(--zoom));
        }`}
        #app {
          min-height: ${minHeight}vh;
        }
      `)
      myStyle.appendChild(styleTextNode)
      document.head.appendChild(myStyle)
    },