同一张大屏尺寸缩放方案，亲试有效

还是这几天做的项目用户的大屏放在四分屏中的一部分，点击空白的地方会自动把小屏切换成大屏，这就涉及到屏幕的缩放，实现方式：

   mounted() {
        this.resize();
        window.onresize = function () {
            this.resize();
        }.bind(this);
        this.getRegionCompany()//获取区域下的公司
    },
    methods: {
        resize() {
            let cliwidth =
                document.documentElement.clientWidth || document.body.clientWidth;
            let cliHeight =
                document.documentElement.clientHeight || document.body.clientHeight;
            let contW = cliwidth>1600?3159:1920;
            let contH = 1080;
            let w = cliwidth / contW;
            let h = cliHeight / contH;
            let appDom = document.querySelector("#app");
            appDom.style.transform = "scale(" + w + "," + h + ")";
            appDom.style.transformOrigin = "top left";
            appDom.style.width = contW + "px";
            appDom.style.height = contH + "px";
        },

 客户的大屏不是标准大屏，尺寸是3159*1080，最开始偷懒，直接根据大屏写死样式，最后用户突然说平时大屏需要缩小四分之一，但是有领导看的时要求能放大，直接傻眼了，解决方式是自动监听计算大屏尺寸变化，实现方案入上代码

这段代码其实是从csdn里看别人的心得实验，确实ok，比人的代码：

大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条）_html页面按照屏幕比例缩放-优快云博客

一、按分辨率进行缩放
实现效果：无论如何拖拽浏览器窗口，都使内容占满屏幕，如下图示

        将宽高都设置为100%，超出部分隐藏（大屏项目理论上不会有），大屏通常是以1920*1080为基础设计页面，页面加载时，定义缩放，宽度缩放为：width/1920，高度缩放为：height/1080，设置appDom.style.transform = 'scale(' + w + ',' + h + ')'。代码如下：

html,body{
  margin: 0;
  padding: 0;
  font-size: 16px;
  overflow: hidden;
  font-family: "Microsoft YaHei";
  width: 100%;
  height: 100%;
}
mounted () {
  this.resize()
  window.onresize = function () {
    this.resize()
  }.bind(this)
  document.title = sysConfig.systemTitle
},
methods: {
  resize () {
    // 系统整体缩放
    let cliWidth = document.documentElement.clientWidth || document.body.clientWidth
    let cliHeight = document.documentElement.clientHeight || document.body.clientHeight
    let contW = 1920
    let contH = 1080
    let w = cliWidth / contW
    let h = cliHeight / contH
    let appDom = document.querySelector('#app')
    appDom.style.transform = 'scale(' + w + ',' + h + ')'
    appDom.style.transformOrigin = 'top left'
    appDom.style.width = contW + 'px'
    appDom.style.height = contH + 'px'
  }
}

二、窗口分辨率缩放 + 等比缩放 + 留白(窗口始终呈现等比之后的页面)
        实现效果：无论如何拖拽浏览器窗口，都使内容按照1920:1080的比例缩放，如果窗口宽高比与之不同，将全部内容展示出来，其余部分展示空白。如下图示（也可能是右边留白）：

        设置宽高为100%，超出部分隐藏（这种情况下一定不会有超出部分，只可能比页面内容区展示的多，且填充为白色）。

        先确定系统宽高比为1920：1080

如果width刚好为1920，则按照宽度为1，高度为：height/1080的比例缩放
如果实际窗口的width/height比这个比例大，则按照weight和height都为height/1080进行缩放
如果实际窗口的width/height比这个比例小，则按照weight和height都为weight/1920进行缩放

html,body{
  margin: 0;
  padding: 0;
  font-size: 16px;
  overflow: hidden;
  font-family: "Microsoft YaHei";
  width: 100%;
  height: 100%;
}
resize () {
  // 系统整体缩放
  let cliWidth = document.documentElement.clientWidth || document.body.clientWidth
  let cliHeight = document.documentElement.clientHeight || document.body.clientHeight
  let contW = 1920
  let contH = 1080
  let w = cliWidth / contW
  let h = cliHeight / contH
  let appDom = document.querySelector('#app')
  let size = cliWidth / cliHeight
  if (cliWidth === screen.width) {
    appDom.style.transform = 'scale(' + w + ',' + h + ')'
  } else if (size > contW / contH) {
    appDom.style.transform = 'scale(' + h + ',' + h + ')'
  } else {
    appDom.style.transform = 'scale(' + w + ',' + w + ')'
  }
  appDom.style.transformOrigin = 'top left'
  appDom.style.width = contW + 'px'
  appDom.style.height = contH + 'px'
}

三、窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条(窗口不呈现等比后全部页面，以浏览器滚动条去查看隐藏页面)
        实现效果：无论如何拖拽浏览器窗口，都使内容按照1920:1080的比例缩放，如果窗口宽高比与之不同，将全部内容展示出来，超出部分由滚动条滚动查看。如下图示（也可能是横向滚动条）：

 

        不设置宽高，body初始设置超出部分隐藏（这种情况很可能有超出部分）。  

         先确定系统宽高比为1920：1080

如果width刚好为1920，则按照宽度为1，高度缩放比例为：height/1080，设置宽高为100%，超出部分隐藏（理论上不会有超出部分）。
如果实际窗口的width/height比这个比例大，则按照weight和height都为weight/1920进行缩放，此时是出现纵向滚动条，设置body的高度为实际dom高度，宽度即为实际窗口宽度，设置允许出现纵向滚动条，禁止横向滚动（因为不会有横向的内容没有展示，如果有，请检查超出部分的样式）。
如果实际窗口的width/height比这个比例小，则按照weight和height都为height/1080进行缩放此时是出现横向滚动条，设置body的高度为实际窗口高度，宽度即为实际dom宽度，设置允许出现横向滚动条，禁止纵向滚动（因为不会有纵向的内容没有展示，如果有，请检查超出部分的样式）。

 

html,body{
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
body{
  overflow: hidden;
}
resize () {
  // 系统整体缩放
  let cliWidth = document.documentElement.clientWidth || document.body.clientWidth
  let cliHeight = document.documentElement.clientHeight || document.body.clientHeight
  let contW = 1920
  let contH = 1080
  let w = cliWidth / contW
  let h = cliHeight / contH
  let appDom = document.querySelector('#app')
  let size = cliWidth / cliHeight
  if (cliWidth === screen.width) {
    appDom.style.transform = 'scale(' + w + ',' + h + ')'
    $('body').css('height', '100%')
    $('body').css('width', '100%')
    $('html').css('overflow-y', 'hidden')
    $('html').css('overflow-x', 'hidden')
  } else if (size > contW / contH) {
    appDom.style.transform = 'scale(' + w + ',' + w + ')'
    $('body').css('height', 1080 / 1920 * cliWidth + 'px')
    $('body').css('width', cliWidth + 'px')
    $('html').css('overflow-y', 'auto')
    $('html').css('overflow-x', 'hidden')
  } else {
    appDom.style.transform = 'scale(' + h + ',' + h + ')'
    $('body').css('width', 1920 * cliHeight / 1080 + 'px')
    $('body').css('height', cliHeight + 'px')
    $('html').css('overflow-x', 'auto')
    $('html').css('overflow-y', 'hidden')
  }
  appDom.style.transformOrigin = 'top left'
  appDom.style.width = contW + 'px'
  appDom.style.height = contH + 'px'

原始出处如下，我们仅仅是借鉴了别人提供的方法：
原文链接：https://blog.youkuaiyun.com/sxww_zyt/article/details/129253643