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

Eric Bidelman

大多數瀏覽器已可進入全螢幕或資訊亭模式一段時間。基本上，瀏覽器的 Chrome UI 會退出，讓內容接手。對於從 Chrome 線上應用程式商店安裝的應用程式，使用者甚至可以手動設定，讓應用程式在從新分頁頁面開啟時以全螢幕模式運作。手動全螢幕模式很好用。程式輔助全螢幕功能更勝一籌！

Fullscreen 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();

注意：exitFullscreen() 是規格版本。不過，FF 和 WebKit 仍會公開前置 cancelFullScreen()。

全螢幕模式中的內容會置中顯示在瀏覽器可視區域中。開發人員可以根據觀看需求，以最適當的方式設定該內容的樣式。一般來說，您會希望 <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 中，Fullscreen API 預設為啟用。如要進一步瞭解其他 API，請參閱規格。

2012-10-11 更新：為了配合規格變更，將 requestFullscreen() 中的「S」改為小寫，並將 document.webkitCancelFullScreen() 變更為 document.webkitExitFullscreen()。更新瀏覽器相容性說明。

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