等比缩放可视化大屏方案

利用windows属性的onresize属性

先看代码

//监听当前游览器窗口高宽，计算比例去改变div的transform 属性缩放界面
function resize () {
  // 系统整体缩放
  let cliWidth = document.documentElement.clientWidth || document.body.clientWidth
  let cliHeight = document.documentElement.clientHeight || document.body.clientHeight
  let contW = 2560;
  let contH = 1400;
  // let contW = window.screen.availWidth;
  // let contH = window.screen.availHeight;
  let w = cliWidth / contW
  let h = cliHeight / contH
//你自己抽参数出来 我直接写的
  let appDom = document.querySelector('#largeScreen')
  let size = cliWidth / cliHeight
  if (cliWidth === screen.width) {
    appDom.style.transform = 'scale(' + w + ',' + h + ')';  
    appDom.style.marginLeft = 0+ 'px'
  } else if (size > contW / contH) {
    appDom.style.transform = 'scale(' + h + ',' + h + ')';
    let main=cliWidth-(appDom.offsetWidth*h);
     appDom.style.marginLeft =  main/2+ 'px'
  } else {
    appDom.style.transform = 'scale(' + w + ',' + w + ')';
    appDom.style.marginLeft = 0+ 'px'
  }
  
  appDom.style.transformOrigin = 'top left'
  appDom.style.width = contW + 'px'
  appDom.style.height = contH + 'px'
  return  appDom.offsetHeight;
}


//使用
   window.onresize = function () {
     resize();
    }.bind(this);