理想：

現(xiàn)實：html5的全屏api處于一個雜亂狀態(tài)，各個瀏覽器還是有著不同的實現(xiàn)方法

1.獲取當前處于全屏模式的元素(注意screen的大小寫)，非全屏時為undefined

var ele=
document.fullscreenElement ||
document.mozFullScreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement;

2.當前 document 是否進入了可以請求全屏模式的狀態(tài)，我們常見的寫法如下，

注意下面寫法是錯誤的！

var isFull =
document.fullscreenEnabled ||
window.fullScreen ||
document.webkitIsFullScreen ||
document.msFullscreenEnabled;

原因，msFullscreenEnabled指的并不是瀏覽器是否處于全屏狀態(tài)，引用微軟官方一句話

Returns true if a document lets elements be displayed in full-screen mode. Otherwise it returns false.
返回當前元素是否可以已全屏展示

可以看出，它的作用并不是當前元素“是否”處于全屏狀態(tài)，而是是否有能力變成全屏，所以判斷當前是否全屏可以通過獲取當前全屏元素來判斷

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.全屏狀態(tài)變化事件監(jiān)聽

• fullscreenchange
• webkitfullscreenchange
• mozfullscreenchange
• MSFullscreenChange

5.全屏error事件監(jiān)聽

• 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/