コンテンツでの説明 - Fullscreen API

しばらくの間、ほとんどのブラウザは全画面モードまたはキオスクモードに移行できます。基本的には、ブラウザの 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 疑似セレクタを使用すると、好みの方法で全画面表示コンテンツのスタイルを簡単に設定できます。

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 に感謝いたします。