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 属性
`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
その他
`html.elements.iframe.allow.fullscreen`	62	79	80		62
`http.headers.Permissions-Policy.fullscreen` 実験的 HTTP の Permissions-Policy ヘッダーにおける fullscreen ディレクティブは、現在の文書が Element.requestFullScreen() を使用することを許可するかどうかを制御します。	88	88			88

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

基本構文

HTML

document.getElementById('video').requestFullscreen();

// Exit fullscreen
document.exitFullscreen();

// Detect fullscreen status
document.addEventListener('fullscreenchange', () => {
  console.log('Fullscreen:', !!document.fullscreenElement);
});

ライブデモ

Request fullscreen

Use requestFullscreen on a container and update status text when the state changes.

プレビュー全画面表示

Fullscreen support note

Summarize common fullscreen entry points on elements and media.

プレビュー全画面表示

Presentation checklist

Pair the API with a few operational notes for accessibility and escape handling.

プレビュー全画面表示

実務での使いどころ

Fullscreen API の活用

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

注意点

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

対応ブラウザ

基本構文

ライブデモ

Request fullscreen

Fullscreen support note

Presentation checklist

実務での使いどころ

Fullscreen API の活用

注意点

アクセシビリティ

参考リンク