Fullscreen APILimited availability
The fullscreen API makes a specific element fill the whole screen and hides most browser UI.
Not yet supported in all major browsers — check the table and provide a fallback.
Browser support
DesktopChrome
1–70Not supported
71+Supportedsince Dec 4, 2018
Current: 155Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154Firefox
1–63Not supported
64+Supportedsince Dec 11, 2018
Current: 157Safari
1–16.3Not supported
16.4+Supportedsince Mar 27, 2023
Current: 27MobileChrome Android
18–70Not supported
71+Supportedsince Dec 4, 2018
Current: 155Firefox Android
4–63Not supported
64+Supportedsince Dec 11, 2018
Current: 157Safari iOS
✕Not supportedup to 27
Current: 27How to use
Not supported in Safari iOS. Use feature detection below and provide a fallback (or a polyfill) for those browsers.
Example
Full syntax and examples are on MDN: exitFullscreen.
Feature detection
CSS · check before using
@supports selector(:fullscreen) {
/* styles that use :fullscreen */
}
/* or in JavaScript */
if (CSS.supports("selector(:fullscreen)")) {
// use it
}Sub-features
Support for each part of the feature (20). The overall table above shows when the whole feature works.
| Sub-feature | Chrome | Edge | Firefox | Safari | Chrome Android | Firefox Android | Safari iOS |
|---|---|---|---|---|---|---|---|
| Document.exitFullscreen | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Document.exitFullscreen.returns_promise | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Document.fullscreenElement | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Document.fullscreenEnabled | 71 | 12 | 64 | 16.4 | 71 | 64 | ✕ |
| Document.fullscreenchange_event | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Document.fullscreenerror_event | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Element.fullscreenchange_event | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Element.fullscreenerror_event | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Element.requestFullscreen | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| Element.requestFullscreen.options_parameter | 71 | 79 | 151 | 16.4 | 71 | 151 | ✕ |
| Element.requestFullscreen.options_parameter.navigationUI_option | 71 | 79 | ✕ | 16.4 | 71 | ✕ | ✕ |
| Element.requestFullscreen.returns_promise | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| HTMLIFrameElement.allowFullscreen | 38 | 12 | 22 | 10.1 | 38 | 22 | ✕ |
| ShadowRoot.fullscreenElement | 71 | 79 | 64 | 16.4 | 71 | 64 | ✕ |
| backdrop.fullscreen | 69 | 79 | 47 | 16.4 | 69 | 47 | 16.4 |
| fullscreen | 71 | 12 | 64 | 16.4 | 71 | 64 | ✕ |
| fullscreen.all_elements | ✕ | ✕ | 64 | ✕ | ✕ | 64 | ✕ |
| iframe.allow.fullscreen | 62 | 79 | 80 | ✕ | 62 | 80 | ✕ |
| iframe.allowfullscreen | 38 | 12 | 18 | 10.1 | 38 | 18 | ✕ |
| http.headers.Permissions-Policy.fullscreen | 88 | 88 | ✕ | ✕ | 88 | ✕ | ✕ |