图表和文字等元素在电子大屏下变形的解决方案

问题简述

最近公司购买了一个电子大屏投屏我们的驾驶舱项目用于展示给客户看，尺寸大概为13:5，比我们开发用的屏幕宽高比要大上不少。这个时候就出现问题了，原来在我们的电脑上完美显示的驾驶舱项目（Vue+ElementUI+Echarts），投到大屏之后，界面里所有内容都被上下压扁（矮胖形状）了。

解决方法

我的解决思路是：现将开发时最外层的div的宽度调大，将内容填充完后，再用css中的transform（scale）属性将宽度恢复为原来大小，这个时候文字和图表等内容是被左右压扁的（瘦高形状），投到大屏上效果互相抵消就不会变形了。

局限于不足

这种办法的局限就是虽然在大屏上显示正常了，但是在正常开发的屏幕上却是变形的（瘦高形状），所以我只能重新拷贝一份代码修改专门适配大屏。需要注意的是，我们设置的元素大小在大屏上是会被缩小的，也就是说原本14px的文字，实际上可能只有12px，毕竟上下左右都被压缩了，所以开发时元素大小需要比原来再大一些

<template>
  <div id="app" class="app" :style="{ width: appWidth }">
    <router-view />
  </div>
</template>

<script>
export default {
  data () {
    return {
      screenHeight: null,
      screenWidth: null,
      appWidth: '100%',
      // 电子大屏全屏下的宽高比
      fullScreenSize: 544 / 208,
      // 电子大屏非全屏下的宽高比
      partScreenSize: 544 / 182
    }
  },
  mounted() {
   	// 默认适配非全屏下的电子大屏
    this.resizePage(this.partScreenSize)
    //监听键盘时间，按下F11切换全屏和非全屏
    document.onkeydown = (event) => {
      const { key } = event
      if (key === 'F11') {
        event.preventDefault()
        if (!document.fullscreenElement) {
          // 当调用了该方法之后，下面才能监听全屏和非全屏的切换
          document.body.requestFullscreen()
        } else {
          document.exitFullscreen()
        }
      }
    }
    // 监听浏览器全屏和非全屏的切换
    // 给resizePage方法传递参数（全屏或非全屏状态下电子大屏的宽高比）
    ['resize', 'fullscreenchange'].forEach(item => {
      document.addEventListener(item, () => {
        if (document.fullscreenElement) {
          this.resizePage(this.fullScreenSize)
        } else {
          this.resizePage(this.partScreenSize)
        }
      })
    })

  },
  methods: {
    resizePage(size) {
      this.screenHeight = document.documentElement.clientHeight
      this.screenWidth = document.documentElement.clientWidth
      const bi = this.screenWidth / (this.screenHeight * size)
      // 先改变主容器（主容器也就是我们开发电脑屏幕浏览器的client宽高）的宽度
      // 电子大屏宽/电子大屏高 = 主容器宽/主容器高
      this.appWidth = this.screenHeight * size + 'px'
      // 将html元素布局在宽为appWidth的主容器下之后，再通过transform属性将主容器恢复到原来大小
      // 此时在主容器下，文字和图表等元素都是变形的，但是投屏之后，在电子大屏上显示就是正常的比例
      document.querySelector('#app').style.cssText = `transform: scale(${bi},1)`
    }
  }
}
</script>

<style lang="scss">
#app {
  overflow: hidden;
  transform-origin: left top 0;
}
</style>