讓內容發揮作用 - 全螢幕 API

多數瀏覽器目前都可以進入全螢幕模式或 Kiosk 模式一段時間。基本上，瀏覽器的 Chrome 使用者介面會破壞瀏覽器，讓內容接手。對於從 Chrome 線上應用程式商店安裝的應用程式，使用者甚至可以透過手動設定的方式，讓應用程式從新分頁開啟時以全螢幕模式執行。建議您使用手動全螢幕。更有效率的程式輔助全螢幕播放功能！

全螢幕 API 可讓網頁應用程式透過程式輔助方式，讓網頁中的任何內容從 JavaScript 進入瀏覽器的全螢幕模式。也就是說，WebGL 和 <canvas> 遊戲終於可以提供身歷其境的體驗，影片就像銀色螢幕一樣，線上雜誌也能帶給使用者身歷其境的體驗。我很喜歡這個瀏覽器，但我們不該受到瀏覽器限制 :)

如果您想略過細節，請參考以下示範：

那麼，API 如何運作呢？舉例來說，如果想讓 <div> 進入全螢幕模式，只要向其下達指令即可：

div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard

接著，document 會公開執行該動作的方法，以結束全螢幕：

document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();

全螢幕模式下的內容在瀏覽器可視區域中央。開發人員必須自行以最適當的瀏覽方式調整內容樣式。一般而言，您會希望 <div> 佔滿整個螢幕的實際狀態。好消息是，這個 API 包含新的 CSS 虛擬選取工具，可滿足以下需求：

div:-webkit-full-screen {
    width: 100% !important;
}
div:-moz-full-screen {
    width: 100% !important;
}
div:-ms-fullscreen {
    width: 100% !important;
}
div:fullscreen {
    width: 100% !important;
}

/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
    display: none;
}
:-moz-full-screen .tohide {
    display: none;
}
:-ms-fullscreen .tohide {
    display: none;
}
:fullscreen .tohide {
    display: none;
}

CSS 虛擬選取器可讓您以自己偏好的方式輕鬆設定全螢幕內容的樣式。

在 Chrome 15、FF 14、IE 11 和 Opera 12.1 中，全螢幕 API 預設為啟用。如要進一步瞭解 API 的其他部分，請參閱規格。

更新時間 2012-10-11：必須配合規格變更。減少 requestFullscreen() 中的「S」，並將 document.webkitCancelFullScreen() 變更為 document.webkitExitFullscreen()。更新瀏覽器相容性註解。

更新日期：2014 年 2 月 11 日：加入 IE 前置字元、加入標準 CSS 語法，並更新瀏覽器相容性註解。感謝 @dstorey 和 @patrickkettner。