FE-V2-PC/src/App.vue

<template>
    <div id="app" :class="$route.path == '/codeHtml'?'codeHtmlPage':''"
         :style="$route.path == '/codeHtml'?'width:'+innerWidth+'px!important;height:'+innerHeight+'px!important;':''">
      <router-view />
    </div>
</template>

<script>
  export default  {
    name:  'App',
    data(){
      return{
        innerHeight:window.innerHeight,
        innerWidth:window.innerWidth,
      }
    },
    metaInfo() {
      return {
        title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
        titleTemplate: title => {
          return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
        },
      }
    },
    mounted(){
      this.banZoom();
      //根据当前浏览器宽度与额定尺寸计算transform缩放值
      document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
      //根据当前浏览器宽度与额定尺寸计算当前浏览器可观看尺寸高度
      document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
      //当尺寸改变后从新计算
      window.onresize = () => {
        return (() => {
          document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
          document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';

        })();
      };
    },
    methods:{
      banZoom(){
        // 禁止通过 ctrl + +/- 和  ctrl + 滚轮 对页面进行缩放
        document.addEventListener('keydown', function (event) {
          if ((event.ctrlKey === true || event.metaKey === true) &&
            (event.which === 61 || event.which === 107 ||
              event.which === 173 || event.which === 109 ||
              event.which === 187 || event.which === 189)) {
            event.preventDefault()
          }
        }, false)
        // Chrome IE 360
        window.addEventListener('mousewheel', function (event) {
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault()
          }
        }, {
          passive: false
        })
        // firefox
        window.addEventListener('DOMMouseScroll', function (event) {
          if (event.ctrlKey === true || event.metaKey) {
            event.preventDefault()
          }
        }, {
          passive: false
        })
      },
    }
  }
</script>
<style>
  html,body{
    margin:0;
    padding:0;
    height:100%;
    width:100%;
    overflow: hidden;
  }
  #app{
    transform-origin: left top;
    width:1920px;
    display: flex;
    flex-direction: column;
    flex:1;
  }
  body::-webkit-scrollbar{ display: none; }
  .v-modal{
    display: none;
  }
  .el-drawer__container,.el-dialog__wrapper,.el-message-box__wrapper{
    background: rgba(0,0,0,0.4);
  }
  .codeHtmlPage{
    transform: scale(1)!important;
  }
</style>