等比例适配页面放大缩小皆可自适应 PC

#Ltf

于 2024-03-29 11:21:46 发布

阅读量185

点赞数 3

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_46032911/article/details/137139308

版权

index.html（或者放在需要缩放页面的mounted里）

function setPageScale() {
      //浏览器窗口大小
      var width = window.innerWidth
      var height = window.innerHeight
      //展示区域大小
      var appHeight=document.getElementById('app').clientHeight
      var appWidth=document.getElementById('app').clientWidth
      //计算宽高比例
      var scaleh = height / 1080
      var scalew = width / 1920
      const element =document.getElementById('app')
      //选取宽或高可撑满，并计算另一个属性的居中px
      if(scaleh>scalew){
        let marginSize=(height-appHeight*scalew)/2;
        element.style["margin-left"]=0;
        element.style["margin-top"]=marginSize+'px';
        element.style.transform = 'scale(' +scalew + ')'
      }else{
        let marginSize=(width-appWidth*scaleh)/2;
        element.style["margin-left"]=marginSize+'px';
        element.style["margin-top"]=0;
        element.style.transform = 'scale(' +scaleh + ')'
      }

    }

  setPageScale() 

//浏览器缩放时监听
  window.addEventListener('resize', function() {
    setPageScale()
  })