用好FullScreen API打造沉浸式用户体验的实战心得

项目初期的技术选型

前段时间接到一个需求，要做一个视频展示页面，要求点击按钮后可以让整个页面进入全屏模式。当时我就想，这不就是 FullScreen API 的用武之地吗？这个API虽然小众，但正好能满足这种场景。

不过说实话，一开始我有点低估了这个功能的复杂度。毕竟MDN文档上看着挺简单的，就几个方法和事件。后来才发现，坑还真不少。

核心代码就这几行

先来说说基本实现吧，其实核心逻辑就这几行代码：

function launchFullScreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

function exitFullScreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

调用的时候也很简单：

const btn = document.getElementById('fullscreen-btn');
btn.addEventListener('click', () => {
  launchFullScreen(document.documentElement);
});

最大的坑：浏览器兼容性问题

真正让我头疼的是浏览器兼容性问题。开始测试的时候发现，在Safari上总是报错，仔细一看才发现需要加上webkit前缀。更烦人的是，不同浏览器对全屏状态的判定也不一样。

比如这个检测全屏状态的方法，写得我想吐：

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

而且你知道吗？iOS Safari 对 FullScreen API 的支持简直是一团糟。最后只能在iOS设备上禁用了这个功能，显示一个提示”当前设备暂不支持全屏功能”。

又踩坑了，样式适配问题

进入全屏后，页面样式完全乱了。原来是因为全屏状态下，浏览器会自动添加一些默认样式。折腾了半天才发现需要手动重置样式：

:-webkit-full-screen {
  width: 100%;
  height: 100%;
  background: #000;
}

:-moz-full-screen {
  width: 100%;
  height: 100%;
  background: #000;
}

:-ms-fullscreen {
  width: 100%;
  height: 100%;
  background: #000;
}

:full-screen {
  width: 100%;
  height: 100%;
  background: #000;
}

这里要特别提醒：一定要处理好背景色，不然会出现尴尬的白屏情况。

事件监听的小技巧

另一个容易忽略的点是全屏状态变化的监听。最开始我是这么写的：

document.addEventListener('fullscreenchange', handleFullScreenChange);

结果发现在某些浏览器上报错。后来改成这样才稳定：

['fullscreenchange', 'webkitfullscreenchange',
 'mozfullscreenchange', 'MSFullscreenChange']
.forEach(eventType => {
   document.addEventListener(eventType, handleFullScreenChange);
});

回顾与反思

总的来说，这个功能算是完成了80分。做得好的地方是：

• 兼容性处理得比较全面
• 封装得还算整洁，后续维护成本不高
• 性能影响很小，用户体验流畅

但是还是有几个遗憾：

• iOS上的兼容问题没彻底解决
• 动画过渡效果不够平滑
• 首次加载时会有短暂的样式闪烁

以上是我个人对这个 FullScreen API 的完整讲解，有更优的实现方式欢迎评论区交流。这个API虽然小众，但在特定场景下确实很实用。希望我的踩坑经验能帮你少走弯路。