ほとんどのブラウザには、全画面表示モードまたはキオスク モードに入る機能が長い間備わっています。基本的に、ブラウザの 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();
全画面表示モードのコンテンツは、ブラウザのビューポートの中央に配置されます。コンテンツを表示する際に最も適切なスタイルを設定するのはデベロッパーの責任です。通常、<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 疑似セレクタを使用すると、全画面コンテンツのスタイルを自由に設定できます。
Fullscreen API は、Chrome 15、FF 14、IE 11、Opera 12.1 ではデフォルトで有効になっています。API の残りの部分の詳細については、仕様をご覧ください。
2012 年 10 月 11 日更新: 仕様の変更に合わせて更新。requestFullscreen() の「S」を小文字に変更し、document.webkitCancelFullScreen() を document.webkitExitFullscreen() に変更しました。ブラウザの互換性に関するコメントを更新しました。
2014 年 2 月 11 日更新: IE の接頭辞を追加し、標準の CSS 構文を追加し、ブラウザの互換性に関するコメントを更新しました。@dstorey 様、@patrickkettner 様、ありがとうございます。