js 大屏屏幕适配方案，同样适用Vue-526互联

vue项目写在 index.html文件下

以1920*1080为基准的屏幕做适配，在网上找的方案在全屏于非全屏时，效果会有一点点差距，所以对代码进行了改进。

如果网页不是全屏则需要加上任务栏高度、工具栏高度进行计算缩进。

我的项目是数据大屏项目一般都是全屏看，所以非全屏时会存在滚动条，并不是bug，刻意留的。

let refreshScale = () => {
        let baseWidth = document.documentElement.clientWidth;
        let baseHeight = document.documentElement.clientHeight;
        let innerHeight = window.innerHeight;
        let avaliHeight = screen.availHeight;
        //body 高度
        let height = screen.height;
        let OuterHeight = window.outerHeight;

        // 任务栏高度 = 屏幕高度 - 屏幕可用高度
        let renwuHeight = height - avaliHeight
        // 任务栏高度 = 浏览器高度 - 页面可用高度 
        let gongjuHeight = OuterHeight - innerHeight

        let appStyle = document.getElementById('app').style;
        let bodyStyle = document.body.style;
        let bodyHeight = baseHeight
        let designRatio = 16 / 9
        let scaleRate = baseWidth / 1920

        
        // 如果工具栏大于0 则证明浏览器不是全屏 
        if (gongjuHeight > 0) {
　　　　　　// 如果页面存在滚动条，还需要加上滚动条的高度 
　　　　　　//bodyHeight 全屏高度

          bodyHeight = baseHeight + renwuHeight + gongjuHeight
        }
        let realRatio = baseWidth / bodyHeight
        
        // 如果realRatio > designRatio 则证明 屏幕比例不是 16：9
        if (realRatio > designRatio) {
          scaleRate = baseHeight / 1080
        }
        appStyle.transformOrigin = 'left top';
        appStyle.transform = `scale(${scaleRate})`;
        appStyle.width = `${baseWidth / scaleRate}px`

        
        bodyStyle.height = `${bodyHeight}px`
      }
      refreshScale()
      // 监听屏幕变化
      window.addEventListener('resize',() => {
        refreshScale()
      })

参考文章：