anKeYuan-largeScreen-1080/src/App.vue

<template>
  <div id="app">
    <div class="viewport">
      <div class="screen" ref="screen">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    this.fitScreen()
    window.addEventListener('resize', this.fitScreen)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.fitScreen)
  },
  methods: {
    fitScreen() {
      const scr = this.$refs.screen
      if (!scr) return
      const sw = 1920, sh = 1080
      const vw = window.innerWidth, vh = window.innerHeight
      const sx = vw / sw, sy = vh / sh
      scr.style.transform = `translate(-50%, -50%) scale(${sx}, ${sy})`
    }
  }
}
</script>

<style lang="scss">
#app {
  width: 100%;
  height: 100%;
}
</style>