Fullscreen API 可以使用你以全屏模式打開或關(guān)閉元素葬荷。例如叮贩，允許 video 或 canvas 元素脱羡，使其占據(jù)整個(gè)屏幕的跋炕。
全屏顯示可以是任意元素
HTML5 API 存在兼容性問題蟆肆，即使高版本瀏覽器也有兼容性問題
不同瀏覽器需要添加不同的前綴
webkit层玲、moz猴凹、o悉抵、ms
Fullscreen API 的兼容情況
基本用法
主要了解它的兩個(gè)方法：
-
document.requestFullscreen()在系統(tǒng)上以全屏模式顯示選定的元素，從而關(guān)閉其他應(yīng)用程序以及瀏覽器和系統(tǒng) UI 元素见擦。 -
document.exitFullscreen()將全屏模式退出到正常模式钉汗。
const fullscreen = (mode = true, el = 'body') =>
mode
? document.querySelector(el).requestFullscreen()
: document.exitFullscreen()
fullscreen() // 默認(rèn)全屏模式打開 "body"
fullscreen(false) // 退出全屏模式
:fullscreen CSS 偽元素代表一個(gè)元素，當(dāng)瀏覽器是在全屏模式下的顯示鲤屡。
.elem:fullscreen {
background-color: #e4708a;
width: 100vw;
height: 100vh;
}
兼容
并不是所有的瀏覽器都支持 Fullscreen API损痰，你可以做一下適當(dāng)?shù)募嫒輥斫鉀Q問題。
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()
}
}
對(duì)應(yīng)的酒来，也需要添加 CSS 前綴卢未。注意：有些使用舊的 :full-screen 語法而不是標(biāo)準(zhǔn) :fullscreen。
div:-webkit-full-screen {}
:-moz-full-screen {}
:-o-full-screen {}
:-ms-fullscreen {}
