数据大屏的解决方案

1. 使用缩放比例适配各种设备（适用16*9比例的屏幕分辨率）

1.封装一个获取缩放比例的工具函数

/**
 * 大屏效果需要满足16:9的屏幕比例，才能达到完美的大屏适配效果
 * 其他比例的大屏效果，不能铺满整个屏幕
 * @param {*} w 设备宽度 默认 1920 
 * @param {*} h 设备高度 默认 1080
 * @returns 返回值是缩放比例
 */
export function getScale(w = 1920, h = 1080) {
  const ww = window.innerWidth / w
  const wh = window.innerHeight / h
  return ww < wh ? ww : wh
}

2.在vue中使用方案如下

<template>
  <div class="full-screen-container">
    <div id="screen">
       大屏展示的内容
    </div>
  </div>
</template>
<script>
import { getScale } from "@/utils/tool";
import screenfull from "screenfull";
export default {
  name: "cockpit",
  mounted() {
    if (screenfull && screenfull.enabled && !screenfull.isFullscreen) {
      screenfull.request();
    }
    this.setFullScreen();
  },
  methods: {
    setFullScreen() {
      const screenNode = document.getElementById("screen");
      // 非标准设备（笔记本小于1920，如：1366*768、mac 1432*896）
      if (window.innerWidth < 1920) {
        screenNode.style.left = "50%";
        screenNode.style.transform = `scale(${getScale()}) translate(-50%, 0)`;
      } else if (window.innerWidth === 1920) {
        // 标准设备 1920 * 1080
        screenNode.style.left = 0;
        screenNode.style.transform = `scale(1) translate(0, 0)`;
      } else {
        // 大屏设备（4K 2560*1600）
        screenNode.style.left = "50%";
        screenNode.style.transform = `scale(${getScale()}) translate(-50%, 0)`;
      }
      // 监听视口变化
      window.addEventListener("resize", () => {
        if (window.innerWidth === 1920) {
          screenNode.style.left = 0;
          screenNode.style.transform = `scale(1) translate(0, 0)`;
        } else {
          screenNode.style.left = "50%";
          screenNode.style.transform = `scale(${getScale()}) translate(-50%, 0)`;
        }
      });
    },
  },
};
</script>
<style lang="scss">
.full-screen-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #131a2b;
  #screen {
    position: fixed;
    width: 1920px;
    height: 1080px;
    top: 0;
    transform-origin: left top;
    color: #fff;
  }
}
</style>