大屏自适应等展示问题

一.大屏界面自适应问题

因为一开始就用的简单的宽度百分比，高度固定的布局，设计稿1920*1080，所以在非全屏下有些错乱，到笔记本上看更加错乱。后续重新写布局大小工作量太大，所以采用了监听浏览器可视窗口宽高属性跟设计稿宽高做对比运算，做一个缩放处理（在style上加scale属性）。将原来的大屏组件放在此缩放组件的默认插槽处即可。
此方法简单直接，只需要关注缩放功能，不需要额外其他界面设置，且别于另一种设置rem的方法，弊端暂未发现。onresize方法时尽量用防抖函数。
参照链接：https://blog.csdn.net/Pentoncos/article/details/128000854

<template>
  <div class="screen-large">
    <div class="screen-large_wrap" :style="style">
      <slot />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Screen',
    data() {
      return {
        style: {
          width: `${this.w}px`,
          height: `${this.h}px`,
          transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中
        },
      };
    },
    props: {
      w: { // 设计图尺寸宽
        type: Number,
        default: 1600,
      },
      h: { // 设计图尺寸高
        type: Number,
        default: 1200,
      },
    },
    mounted() {
      this.setScale();
      this.onresize = this.debounce(() => this.setScale(), 100);
      window.addEventListener('resize', this.onresize);
    },
    methods: {
      // 防抖
      debounce(fn, t) {
        const delay = t || 500;
        let timer;
        // eslint-disable-next-line func-names
        return function () {
          // eslint-disable-next-line prefer-rest-params
          const args = arguments;
          if (timer) {
            clearTimeout(timer);
          }
          const context = this;
          timer = setTimeout(() => {
            timer = null;
            fn.apply(context, args);
          }, delay);
        };
      },
      // 获取缩放比例
      getScale() {
        const w = window.innerWidth / this.w;
        const h = window.innerHeight / this.h;
        return w < h ? w : h;
      },
      // 设置缩放比例
      setScale() {
        this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
      },
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.onresize);
    },
  };
</script>

<style lang="scss">
  .screen-large {
    width: 100vw;
    min-height: 100%;
    max-height: 100vh;
    overflow: hidden;
    background: #567789;

    .screen-large_wrap {
      transform-origin: 0 0;
      position: absolute;
      top: 50%;
      left: 50%;
      padding: 18px 64px;
    }
  }
</style>

二、dom渲染问题

在大屏加一个el-select下拉框，每次选中下拉时会造成大屏其他区域文字闪烁，原因不详，使用popper-append-to-body属性设置未false，或overflow：hidden均不行。搜索发现建议，提高对应区域的z-index，设置后得到解决。

三.全屏问题

1.首先遇到主动触发全屏问题
采用代码主动触发全屏，写到mounted函数里，通过路由跳转进来没问题。但是如果刷新浏览器，直接执行下方代码，会报错，不触发全屏效果。搜索发现，只有用户的主动行为才可以触发（任何鼠标事件任何键盘事件等等）,这是为了用户体验和用户的浏览安全。如果您一进入一个网页它就给你弹一个全屏，您一定觉得反感。，这个是浏览器规定，无法规避。

let element = document.documentElement
   if (element.requestFullscreen) {
           element.requestFullscreen()
       } else if (element.msRequestFullscreen) {
           element.msRequestFullscreen()
       } else if (element.mozRequestFullScreen) { 
           element.mozRequestFullScreen()
       } else if (element.webkitRequestFullscreen) {
           element.webkitRequestFullscreen()
       }
   }

2.f11操作的全屏，代码监听不到
有需求需要添加全屏非全屏按钮点击切换，因为用户可能不熟悉电脑。所以用代码来实现全屏非全屏切换，非全屏切换时需要监听是否全屏后，才能运行非全屏代码。但是发现通过代码全屏的效果能用下方代码获取全屏状态，通过f11全屏的效果用下方代码无法获取全屏状态。可以采用监听键盘f11事件重写调用代码全屏方法（也有弊端，火狐不好用，会触发上面那个问题），或者禁用f11方法。我采用了禁用f11的方法。
另外对于用户通过其他方式如esc退出全屏的方法，可以通过侦听resize方法，获取全屏状态，来切换全屏非全屏按钮。

        function isFullscreen(){
            return document.fullscreenElement    ||
                   document.msFullscreenElement  ||
                   document.mozFullScreenElement ||
                   document.webkitFullscreenElement || false;
        }

四、大屏界面优化

大屏中的动图在4k屏幕下会有卡顿，换成css动态效果会好些。