全画面 API のガイド

全画面モードの有効化

全画面モードで表示したい要素（例えば <video> など）がある場合、その requestFullscreen() メソッドを呼び出すことによって、全画面モードで表示させることができます。

この <video> 要素について考えてみましょう。

<video controls id="my-video">
  <source src="somevideo.webm" />
  <source src="somevideo.mp4" />
</video>

この video 要素を以下のように全画面化することができます。

const elem = document.getElementById("my-video");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
}

このコードでは、requestFullscreen() メソッドが存在するかどうかを調べてから、それを呼び出しています。

要素が全画面モードになると、:fullscreen に一致するようになり、画面全体を占めるなどのデフォルトのスタイルが適用されます。また、その要素は最上位レイヤーに配置されます。

複数の要素が全画面モードでの表示をリクエストされた場合、それらはすべて :fullscreen に一致するようになり、すべて最上位レイヤーに配置されます。これらは互いに積み重なり、より新しくリクエストされた要素が古い要素の上に表示されます。最も新しくリクエストされた要素が表示され、Document.fullscreenElement によって返されます。

通知

全画面モードが正常に実行されると、その要素を含む文書は fullscreenchange イベントを受け取ります。全画面モードが終了すると、その文書は再び fullscreenchange イベントを受け取ります。なお、 fullscreenchange イベントは、文書が全画面モードに入るか抜けるかについての情報そのものは提供しませんが、もし文書に null ではない fullscreenElement があれば、全画面モードであることが分かります。

全画面リクエストに失敗した場合

全画面モードに切り替わることは保証されていません。例えば、<iframe> 要素には全画面モードでコンテンツを表示することを許可するためのallowfullscreen 属性があります。また、ウィンドウ形式のプラグインなど、特定の種類の中身は全画面モードで表示することができません。全画面表示できない要素（またはその親や子孫）を全画面表示にしようとしても、これはうまくいきません。その代わりに、全画面表示をリクエストされた要素は mozfullscreenerror イベントを受け取ります。全画面表示に失敗した場合、 Firefox はウェブコンソールにエラーメッセージをログ出力し、なぜ失敗したのかを説明します。しかし、 Chrome や Opera の新しいバージョンでは、そのような警告は生成されません。

全画面モードからの脱出

ユーザーは常に自分自身で全画面モードを終了することができます。ユーザーが知りたいことを参照してください。また、 Document.exitFullscreen() メソッドを呼び出すことで、プログラム的にそうすることも可能です。

全画面モードで複数の要素がある場合、exitFullscreen() を呼び出すと、最上位の要素のみが全画面モードを終了し、その下にある要素が表示されます。Esc または F11 を押すと、すべての全画面要素が終了します。

その他の情報

Document は、全画面表示のウェブアプリケーションを開発する際に有益な追加情報を提供します。

Document.fullscreenElement / ShadowRoot.fullscreenElement

fullscreenElement プロパティは、現在全画面表示されている Element を指示します。これが null でない場合、文書（またはシャドウ DOM）は全画面モードになっています。もしこれが null ならば、文書（またはシャドウ DOM）は全画面モードではありません。

Document.fullscreenEnabled

fullscreenEnabled プロパティは、現在文書内の全画面モードがリクエストされる状態であるかどうかを指示します。

モバイルブラウザーのビューポートの拡大縮小

モバイルブラウザーによっては、全画面モードのときにビューポートメタタグの設定を無視し、ユーザーによる拡大縮小をブロックするものがあります。例えば、全画面モードでないときにピンチ操作で拡大縮小することができたとしても、全画面モードで表示されたページではピンチ操作で拡大縮小するジェスチャーが動作しないことがあります。

ユーザーが知りたいこと

ユーザーには、Esc キー（または F11）を押して全画面モードを終了できることを必ず伝えておくとよいでしょう。

また、全画面モード中に他のページに移動したり、タブを切り替えたり、他のアプリケーションに切り替える（例: Alt-Tab など）と、全画面モードも終了してしまいます。

例

mdn/dom-examples GitHub リポジトリーには、全画面 API の完全な例が掲載されています。

例を実行し、ソースコードを閲覧してください。

仕様書

ブラウザーの互換性

関連情報

• 全画面モードの使用
• Element.requestFullscreen()
• Document.exitFullscreen()
• Document.fullscreen
• Document.fullscreenElement
• :fullscreen, ::backdrop
• allowfullscreen