如果想要讓整個頁面或某個區塊變成全螢幕的形式，可以使用這個 HTML5 fullscreen API，使用方法也很簡單，只要像這樣去指定要變全螢幕的區塊再去呼叫 requestFullscreen() 就好了。

if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
  elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}

其中選擇範圍可以像這樣寫：

openFullscreen(document.documentElement);   //整個網頁
openFullscreen(document.getElementById('id');  //指定元素

 

離開全螢幕模式可以使用 exitFullscreen()

function closeFullscreen(){
  if (document.exitFullscreen) {   
    document.exitFullscreen();  
  } else if (document.mozCancelFullScreen) {   
    document.mozCancelFullScreen();  
  } else if (document.webkitCancelFullScreen) {   
    document.webkitCancelFullScreen();  
  } else if (document.msExitFullscreen) {   
    document.msExitFullscreen();  
  }
}
closeFullscreen()

但由於在全螢幕模式時只要按下 esc 就可以退出，所以不一定要使用 .exitFullscreen()