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 {}