最近属实比较忙，公司事情比较多，但是做的其实也是重复性的工作，独立负责项目的好处也很明显，可以让自己得到全方位的锻炼，缺陷也很明显，没有人指导往往会因为一些小问题摸索很久很久，也比较难接触到新的东西，不过对于自己最欠缺的恰巧就是独立负责项目的经验，暂时工作还是比较满足的。

废话不多说，简单记录一下刚遇到的一个小需求，实现指定窗口的全屏以及半屏电影模式，其实这个需求还是比较常见的，尤其是在一些大屏项目中，实现起来也比较简单，浏览器就提供了API，只是不同浏览器之间存在不同兼容性问题

 requestFullscreen  // 全屏
 exitFullscreen  // 取消全屏
 
 // 谷歌兼容
 webkitRequestFullscreen // 全屏
 webkitCancelFullscreen // 取消全屏

 // 火狐兼容
 mozRequestFullscreen // 全屏
 mozCancelFullscreen // 取消全屏

 // IE 兼容
 msRequestFullscreen // 全屏
 msExitFullscreen // 取消全屏

使用示例

 function maxScreen(){
   let viewDom: any = document.getElementById(id);
   if (viewDom.requestFullscreen) {
     viewDom.requestFullscreen();
   } else if (viewDom.msRequestFullscreen) {
     viewDom.msRequestFullscreen();
   } else if (viewDom.mozRequestFullScreen) {
     viewDom.mozRequestFullScreen();
   } else if (viewDom.webkitRequestFullScreen) {
     viewDom.webkitRequestFullScreen();
   }
 }

 // 多数情况下进入全屏后浏览器就是会提示使用ESC退出，所以退出方法一般用不上也不再做示例，方式相同

 // 其次还有一些实用的方法来判断当前状态
 document.fullscreenEnabled 
 // 判断当前浏览器是否支持全屏 true = 支持、false = 不支持

 document.webkitIsFullScreen
 // 判断浏览器当前是否处于全屏模式下 true = 全屏、flase = 未全屏

半屏(电影)模式

 <!-- 半屏模式其实非常简单，只需要在需要全屏的DOM外层包装一层模拟样式盒子即可，模拟出半屏(电影)模式的上下黑边 -->
 <div id="screenView" :class="halfMode ? 'halfMode' : ''">
   <div class="gameView" />
 </div>

同时使用window.onresize监听窗口变化，通过判断当前浏览器是否处于全屏决定是否添加模拟样式

 const halfMode = ref(false)
 // 进入半屏时添加模拟样式
 function halfScreen(){
   halfMode.value = true
   // ...全屏逻辑(同上)
 }

 onMounted(() => {
  window.onresize = function () {
    // 退出半屏模式时需要去除模拟样式
    if (!document.webkitIsFullScreen) {
      halfMode.value = false
    }
  }
 })
 // 以上一个简单的全品、半屏功能即可实现，别忘了在卸载组件时去除事件监听
 window.resize = undefined