这个API允许单个的元素全屏显示，和F11全屏不同，这个API用来展示某个容器里面的图片、视频等。
所有的最新浏览器，包括IE11呢。移动端的支持有限，不过没关系，反正移动端的浏览器都是近乎全屏了。
因为这个API还没有规范，所以很可能以后会有改变，同时，使用起来也少不了各种浏览器厂商的前缀了。
下面的例子中，想要全屏显示的是ID为myimage的图片。先来看一下几个相应的方法。
如果当前浏览器允许进入全屏模式，这个属性返回true，可用来检测浏览器是否支持全屏API
if (document.fullscreenEnabled) { ... }
早期的时候，screen中的s是大写的，现在都小写了，除了Firefox；加上前缀，跨浏览器的代码是：
// full-screen 可用?
if (
document.fullscreenEnabled ||
document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled ||
document.msFullscreenEnabled
) {
...
}
Opera 12是唯一不需要加前缀的浏览器，不过Opera 15+ 需要加webkit，为啥呢？因为两年前就换内核了啊，不过这个不怎么重要，反正很少人用Opera
这个方法是单个元素全屏显示
例如：
document.getElementById("myimage").requestFullscreen();
同样，Firefox的screen的s是大写的：
var i = document.getElementById("myimage");
// go full-screen
if (i.requestFullscreen) {
i.requestFullscreen();
} else if (i.webkitRequestFullscreen) {
i.webkitRequestFullscreen();
} else if (i.mozRequestFullScreen) {
i.mozRequestFullScreen();
} else if (i.msRequestFullscreen) {
i.msRequestFullscreen();
}
这个属性返回当前全屏显示的元素，没有则返回null
if (document.fullscreenElement) { ... }
同样，Firefox的screen的s是大写的：
// are we full-screen?
if (
document.fullscreenElement ||
document.webkitFullscreenElement ||
document.mozFullScreenElement ||
document.msFullscreenElement
) {
...
}
这个方法退出全屏状态
document.exitFullscreen();
同样的，‘screen’是小写的，不过它之前写作 cancelFullScreen，在Firefox仍然还是这样写。
// exit full-screen
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
进/出全屏状态的时候触发事件，不附带任何信息，不过可通过上面介绍的document.fullscreenElement来监测当前是否是全屏状态。
document.addEventListener("fullscreenchange", function() { ... });
下面是各浏览器的写法，注意IE的写法有点特殊
document.addEventListener("fullscreenchange", FShandler);
document.addEventListener("webkitfullscreenchange", FShandler);
document.addEventListener("mozfullscreenchange", FShandler);
document.addEventListener("MSFullscreenChange", FShandler);
全屏有时会不成功，比如, iframes 如果没有 allowfullscreen 属性 或者窗口化的插件的内容想执行全屏却被阻止（windowed plug-in content may be blocked）的时候，fullscreenerror 事件就可能被触发：
document.addEventListener("fullscreenerror", function() { ... });
同样的，加上个浏览器厂商的前缀，注意IE的写法是驼峰式的（camel-casing）:
document.addEventListener("fullscreenerror", FSerrorhandler);
document.addEventListener("webkitfullscreenerror", FSerrorhandler);
document.addEventListener("mozfullscreenerror", FSerrorhandler);
document.addEventListener("MSFullscreenError", FSerrorhandler);
全屏状态下的元素也能够被赋予样式
控制处于全屏状态的元素
:fullscreen {
...
}
之前被叫做 :full-screen, 然后在Webkit 和 Firefox中还是这样。跨多浏览器代码：
:-webkit-full-screen {
}
:-moz-full-screen {
}
:-ms-fullscreen {
}
:fullscreen {
}
当不同比例的元素，比如图像，全屏的时候，多余的背景色可以用这个伪元素来定义。
:fullscreen::backdrop {
background-color: #006; /* dark blue */
}
backdrop就是全屏元素后面的空白背景，在全屏元素之下、在页面剩下元素之上，IE11支持, Firefox 和 Opera 12不支持。Chrome、Safari 和 Opera 15+ 引入了这个 backdrop element 但是不允许定义样式。目前仅仅能够作用于 IE11，所以实际代码如下
:-ms-fullscreen::-ms-backdrop {
background-color: #006; /* dark blue */
}
在 IE11, Firefox, 和 Opera 12 全屏元素是 100% 的 width 和 height ，图片因此就拉伸变形了。在IE11 为全屏元素设置width 和 height 的结果是元素跑到了屏幕 的左上角，背景为黑色（可以用::backdrop改为其它色）。Opera 12 和 IE11 类似，不过 backdrop背景是透明的，Firefox 忽略尺寸设置。在Chrome, Safari, 和 Opera 15+ 全屏元素是居中的、背景backdrop元素黑色。
如果要保持浏览器的一致性，同样可以为 Webkit/Blink 内核的浏览器像 Firefox/IE11 这样拉伸图片:
:-webkit-full-screen {
position: fixed;
width: 100%;
top: 0;
background: none;
}
或者，为IE11 赋予和 Webkit/Blink 一样的居中方式：
:-ms-fullscreen {
width: auto;
height: auto;
margin: auto;
}
这个方法在 Firefox无效，它忽略上面提到的width和height，解决的方法很简单：可以变相地让它的父元素全屏，然后调节它的尺寸。
Full-Screen API 相对简单，不过浏览器差异使得代码很丑陋，并且不保证将来不变（原文作者一年前还写了一篇文章，变化挺大）, 把精力放到其它事情上，等到这个 API 稳定之后再来看。
在HTML5 游戏和视频为主的网站，全屏几乎是必须的，如果不想自己维护代码，可以使用一个现成的库，例如 screenfull.js