通过缩放实现自适应

<template>
  <div id="app" :style="{
    transform: 'scale('+scale+')'
  }">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
``
```js
<script>
export default {
  name: 'App',
  data(){
    return {
      scale: 1,
      timeout: null
    }
  },
  mounted() {
    this.setScale()
    this.registerResize()
  },
  methods: {
    registerResize(){
      let that = this
      window.addEventListener('resize', function(){
        that.setScale()
      })
    },
    setScale(){
      if(this.timeout) clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        let windowWidth = document.body.offsetWidth;
        // 浏览器所占屏幕宽度
        console.log(windowWidth,'windowWidth');
        let windowHeight = document.body.offsetHeight;
        // 浏览器所占屏幕高度
        console.log(windowHeight,'windowHeight');
        let scale = 1
        console.log(windowWidth/windowHeight,'windowWidth/windowHeight');
        console.log(1920/1080);
        if((windowWidth/windowHeight) > (1920/1080)){
          scale = (windowHeight/1080).toFixed(2)
          console.log(scale,'>');
        } else {
          // 宽高比小于1.7 即宽度变小
          scale = (windowWidth/1920).toFixed(2)
          console.log(scale,'<');
        }
        this.scale = scale
      }, 333)
    }
  }

}
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -540px;
  margin-left: -960px;
  transition: all 0.33s linear;
}
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
}
.BMapLabel {
  border: none !important;
  background: none !important;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background-color: #000;
  overflow: hidden;
}
</style>