大屏页面三种缩放

（1）按分辨率进行缩放

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'
  }
}

（2）窗口分辨率缩放 + 等比缩放（窗口始终呈现等比之后的页面）

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'
}

html,body{
  margin: 0;
  padding: 0;
  font-size: 16px;
  overflow: hidden;
  font-family: "Microsoft YaHei";
  width: 100%;
  height: 100%;
}

 

（3）窗口分辨率缩放 + 等比缩放 + 不留白滚动条（窗口不呈现等比后全部页面，以浏览器滚动条去查看隐藏页面）

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'
}

 

html,body{
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Microsoft YaHei";
}
body{
  overflow: hidden;
}