HTML5 全屏特性

html5 現在支持全屏特性了，fullscreen api接口如下所示（使瀏覽器窗口全屏），見下列代碼：

（1）全屏　

// Find the right method, call on correct element
function launchFullScreen(element) {
  if(element.requestFullScreen) {
    element.requestFullScreen();
  } else if(element.mozRequestFullScreen) {
    element.mozRequestFullScreen();
  } else if(element.webkitRequestFullScreen) {
    element.webkitRequestFullScreen();
  }
}

// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page  這里代碼必須手動出發執行才可以
launchFullScreen(document.getElementById("videoElement")); // any individual element

（2）取消全屏

// Whack fullscreen
function cancelFullscreen() {
  if(document.cancelFullScreen) {
    document.cancelFullScreen();
  } else if(document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if(document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

// Cancel fullscreen for browsers that support it!
cancelFullscreen();

　　

（3）全屏屬性和事件

• document.fullScreenElement: 觸發全屏的元素.
• document.fullScreenEnabled: 全屏是否被禁止.

（4）全屏的樣式

/* html */
:-webkit-full-screen {
  background: pink;
}
:-moz-full-screen {
  background: pink;
}

/* deeper elements */
:-webkit-full-screen video {
  width: 100%;
  height: 100%;
}

　　

Note：觸發全屏需要手動觸發，瀏覽器不能自動全屏的。