Fullscreen API在H5视频和H5游戏进入全屏的时候非常有用。

但是却隐藏着非常多的坑。

首先，看下兼容情况：

例子：

点击下面的DEMO进入例子页面，如果浏览器支持的话DIV会全屏显示在屏幕中央。

查看DEMO

使用方法：

document."前缀"FullscreenEnabled 来调查是否支持Fullscreen API

document."前缀"RequestFullscreen()来全屏显示。

document."前缀"ExitFullscreen()来退出全屏显示。

关于前缀如下表显示：

坑：

这段时间正好有一个全屏的需求就试了这个接口发现问题真的很多。

坑1：

Fullscreen API 现在有名字混乱的现象，分为Fullscreen 和 FullScreen 看文档的时候要注意，s是否为大写，有没有on！

另外对应的CSS也分为

:-webkit-full-screen

:-moz-full-screen

:-ms-fullscreen

:fullscreen

坑2：

火狐内核不能监听元素的全屏，只能监听document的全屏。

坑3：

iOS不能用！

iOS不能用！

iOS不能用！

各个浏览器的默认样式

Chrome:

默认对象会在屏幕中央显示，未填充部分显示黑色。

CSS 「:-webkit-full-screen」 可以对全屏对象进行位置调节。

Safari

默认会显示在屏幕中央

CSS 「:-webkit-full-screen」可以改变位置，

但是全屏的时候因为有过度，所以位置变更后过度会变得很奇怪。

Firefox

全屏会将对象撑满整个屏幕。

因此「:-moz-full-screen」无法指定宽高。

IE11

全屏对象会显示在画面左上角。

因此「:-ms-fullscreen」不设定的话不会显示在中央。

另外可以通过::-ms-backdrop来改变背景色。