Fullscreen API 可以使用你以全屏模式打开或关闭元素。例如，允许 video 或 canvas 元素，使其占据整个屏幕的。
全屏显示可以是任意元素
HTML5 API 存在兼容性问题，即使高版本浏览器也有兼容性问题
不同浏览器需要添加不同的前缀
webkit、moz、o、ms
Fullscreen API 的兼容情况
基本用法
主要了解它的两个方法：
-
document.requestFullscreen()在系统上以全屏模式显示选定的元素，从而关闭其他应用程序以及浏览器和系统 UI 元素。 -
document.exitFullscreen()将全屏模式退出到正常模式。
const fullscreen = (mode = true, el = 'body') =>
mode
? document.querySelector(el).requestFullscreen()
: document.exitFullscreen()
fullscreen() // 默认全屏模式打开 "body"
fullscreen(false) // 退出全屏模式
:fullscreen CSS 伪元素代表一个元素，当浏览器是在全屏模式下的显示。
.elem:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
兼容
并不是所有的浏览器都支持 Fullscreen API，你可以做一下适当的兼容来解决问题。
function launchFullScreen(elem) {
if (elem.requestFullScreen) {
elem.requestFullScreen()
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen()
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen()
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen()
} else {
elem.oRequestFullScreen()
}
}
对应的，也需要添加 CSS 前缀。注意：有些使用旧的 :full-screen 语法而不是标准 :fullscreen。
div:-webkit-full-screen {}
:-moz-full-screen {}
:-o-full-screen {}
:-ms-fullscreen {}
