理想：
| 类型 | 名称 | 作用 |
|---|---|---|
| 属性 | fullscreenElement | 当前处于全屏模式的DOM元素 |
| 属性 | fullscreenEnabled | 当前 document 是否进入了可以请求全屏模式的状态 |
| 方法 | requestFullscreen() | 请求进入全屏模式 |
| 方法 | exitFullscreen() | 退出全屏模式 |
| 事件 | fullscreenchange | 进入/退出全屏模式切换时会触发 |
| 事件 | fullscreenerror | 进入/退出全屏模式失败时会触发 |
现实：html5的全屏api处于一个杂乱状态，各个浏览器还是有着不同的实现方法
1.获取当前处于全屏模式的元素(注意screen的大小写)，非全屏时为undefined
var ele=
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;
2.当前 document 是否进入了可以请求全屏模式的状态，我们常见的写法如下，
注意下面写法是错误的！
var isFull =
document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;
原因，msFullscreenEnabled指的并不是浏览器是否处于全屏状态，引用微软官方一句话
Returns true if a document lets elements be displayed in full-screen mode. Otherwise it returns false.
返回当前元素是否可以已全屏展示
可以看出，它的作用并不是当前元素“是否”处于全屏状态，而是是否有能力变成全屏，所以判断当前是否全屏可以通过获取当前全屏元素来判断
3.跨浏览器进入全屏
function requestFullScreen(element) {
if (!element) {
element = document.body;
}
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
4.跨浏览器退出全屏
function exitFullScreen() {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen()
}
}
4.全屏状态变化事件监听
- fullscreenchange
- webkitfullscreenchange
- mozfullscreenchange
- MSFullscreenChange
5.全屏error事件监听
- fullscreenerror
- webkitfullscreenerror
- mozfullscreenerror
- MSFullscreenError
6.关于样式
chrome：元素居中
其他：
position: fixed !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
bottom: 0 !important;
可通过以下方式覆盖样式
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }
最后上一个demo链接
https://laincarl.github.io/demos/fullscreen/
