iOS Safari 没有全屏 API，但 Chrome（Android 版）、Firefox 和 IE 11+ 上则有相应的 API。
打造全屏体验时需要在意的主要 JS API 如下：
- element.requestFullscreen()：以全屏模式显示元素。
- document.exitFullscreen()：取消全屏模式。
- document.fullscreenElement：如有任何元素处于全屏模式，返回 true。
应用进入全屏模式时，无法再使用浏览器的 UI 控件。 全屏模式下的浏览器没有前进和后退这样的标准导航控件，也没有刷新按钮可以显示。
<body>
<div>hello world</div>
<button id="goFS">全屏</button>
<script>
const goFS = document.getElementById("goFS");
goFS.addEventListener("click", function () {
document.body.requestFullscreen();
// 为了兼容要写两套
document.documentElement.requestFullscreen();
}, false);
</script>
</body>
AI 代码解读
让 video 元素进入全屏模式与让任何其他元素进入全屏模式的方法完全相同。 只需调用 video 元素上的 requestFullscreen 方法。
<body>
<video id="videoElement"></video>
<button id="goFS">全屏</button>
<script>
const goFS = document.getElementById("goFS");
goFS.addEventListener("click", function () {
const videoElement = document.getElementById("videoElement");
videoElement.requestFullscreen();
}, false);
</script>
</body>
AI 代码解读
Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。
调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的Promise会resolve，并且该元素会收到一个fullscreenchange事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的promise会变成rejected并且该元素会收到一个fullscreenerror事件。
