Fullscreen API | Frontend Practical Guide

Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`:fullscreen`	71	12	64	16.4	71	16.4
HTML 属性
`allow (fullscreen)`	62	79	80		62
`allowfullscreen`	38	12	18	10.1	38	12
DOM API
`exitFullscreen` Document の exitFullscreen() メソッドは、この文書で現在全画面モードで表示されている要素が全画面モードを抜け、画面を以前の状態に戻すことを要求します。これはふつう、以前の Element.requestFullscreen() の呼び出しの効果を取り消します。	71	79	64	16.4	71	16.4
`exitFullscreen (returns promise)` Promise` を返す。	69	79	64	16.4	69	16.4
`fullscreenchange_event` fullscreenchange イベントは、ブラウザーが全画面モードに移行したり終了したりした直後に発生します。	71	79	64	16.4	71	16.4
`fullscreenElement` Document.fullscreenElement プロパティは読み取り専用で、この文書内で現在全画面モードで表示されているを返し、全画面モードを使用していない場合は null を返します。	71	79	64	16.4	71	16.4
`fullscreenEnabled` fullscreenEnabled は Document インターフェイスの読み取り専用プロパティで、全画面モードが使用できるかどうかを示します。	71	12	64	16.4	71	16.4
`fullscreenerror_event` fullscreenerror イベントは、ブラウザーが全画面モードに移行できないときに発生します。	71	79	64	16.4	71	16.4
`fullscreenchange_event` fullscreenchange イベントは、ある要素 (Element) が全画面モードに切り替わったり、終了したりした直後に発生します。	71	79	64	16.4	71	16.4
`fullscreenerror_event` fullscreenerror イベントは、ブラウザーが全画面モードに切り替えることができなかったときに発生します。	71	79	64	16.4	71	16.4
`requestFullscreen` Element.requestFullscreen() メソッドは、要素を全画面表示するための非同期的な要求を発行します。	71	79	64	16.4	71	16.4
`requestFullscreen (options navigationUI parameter)` options.navigationUI`パラメータ	71	79		16.4	71
`requestFullscreen (returns promise)` Promise` を返す。	71	79	64	16.4	71	16.4
`allowFullscreen` allowFullscreen は HTMLIFrameElement インターフェイスのプロパティで、iframe 要素の allowfullscreen 属性を反映する論理値であり、この iframe のコンテンツが Element.requestFullscreen を使用することを許可するかどうかを示します。	38	12	22	10.1	38	12
`fullscreenElement` fullscreenElement は ShadowRoot インターフェイスの読み取り専用プロパティで、現在全画面モードで表示されているシャドウツリー内の要素を返します。	71	79	64	16.4	71	16.4
CSS セレクタ
`fullscreen` フルスクリーン対応	69	12	47	16.4	69	16.4
`all elements` フルスクリーンスタック内のすべての要素を選択する		12	43
その他
`fullscreen` 実験的 HTTP の Permissions-Policy ヘッダーにおける fullscreen ディレクティブは、現在の文書が Element.requestFullScreen() を使用することを許可するかどうかを制御します。	88	88			88

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

document.onclick = (event) => {
  if (document.fullscreenElement) {
    document
      .exitFullscreen()
      .then(() => console.log("Document Exited from Full screen mode"))
      .catch((err) => console.error(err));
  } else {
    document.documentElement.requestFullscreen();
  }
};

実務での使いどころ

Fullscreen API の活用

Document の exitFullscreen() メソッドは、この文書で現在全画面モードで表示されている要素が全画面モードを抜け、画面を以前の状態に戻すことを要求します。

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Fullscreen API の活用

注意点

実装メモ

参考リンク