概述
意外的發現一個網頁有一個按鈕能使網頁全屏，查了下代碼發現是H5的全屏api，於是就查了下資料，記錄下來供以后開發時參考，相信對其他人也有用。
參考資料：
利用js如何做到讓頁面全屏和不全屏功能
Element.requestFullScreen() MDN
全屏API
H5有一個全屏API，Element.requestFullscreen() 方法用於發出異步請求使元素進入全屏模式。
需要注意的是：只有包含在頂層文檔內部的標准HTML元素、<svg>元素和<math>元素，以及擁有allowfullscreen屬性的iframe的內部元素可以進入全屏模式。這意味着在frame內部的元素，以及object的內部元素不能進入全屏模式。
示例代碼如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>全屏不全屏</title>
</head>
<body>
<button id="fullScreen">全屏模式</button>
<button id="noFullScreen">取消全屏</button>
</body>
</html>
<script>
document.getElementById("fullScreen").onclick=function(){
if(document.documentElement.RequestFullScreen){
document.documentElement.RequestFullScreen();
}
//兼容火狐
console.log(document.documentElement.mozRequestFullScreen)
if(document.documentElement.mozRequestFullScreen){
document.documentElement.mozRequestFullScreen();
}
//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
if(document.documentElement.webkitRequestFullScreen){
document.documentElement.webkitRequestFullScreen();
}
//兼容IE,只能寫msRequestFullscreen
if(document.documentElement.msRequestFullscreen){
document.documentElement.msRequestFullscreen();
}
}
document.getElementById("noFullScreen").onclick=function(){
if(document.exitFullScreen){
document.exitFullscreen()
}
//兼容火狐
console.log(document.mozExitFullScreen)
if(document.mozCancelFullScreen){
document.mozCancelFullScreen()
}
//兼容谷歌等
if(document.webkitExitFullscreen){
document.webkitExitFullscreen()
}
//兼容IE
if(document.msExitFullscreen){
document.msExitFullscreen()
}
}
</script>
全屏事件
如果元素被允許進入全屏模式，document對象會收到一個fullscreenchange事件，通知調用者當前元素已經進入全屏模式。如果全屏請求不被許可，則會收到一個fullscreenerror事件。
示例如下：
document.addEventListener('fullscreenchange', function(){ /*code*/ });
document.addEventListener('webkitfullscreenchange', function(){ /*code*/});
document.addEventListener('mozfullscreenchange', function(){ /*code*/});
document.addEventListener('MSFullscreenChange', function(){ /*code*/});
document.addEventListener('fullscreenerror', function(){ /*code*/ });
document.addEventListener('webkitfullscreenerror', function(){ /*code*/});
document.addEventListener('mozfullscreenerror', function(){ /*code*/);
document.addEventListener('MSFullscreenError', function(){ /*code*/ });
全屏樣式
全屏之后還可以選擇性的調整樣式，就和hover一樣，如下所示：
:-webkit-full-screen { }
:-moz-full-screen { }
:-ms-fullscreen { }
:fullscreen { }