This is especially important now that more browsers are supporting an “installed web app” experience which launch fullscreen.
Getting your app or site fullscreen
There are several ways that a user or developer can get a web app fullscreen.
- Request the browser go fullscreen in response to a user gesture.
- Install the app to the home screen.
- Fake it: auto-hide the address bar.
Request the browser go fullscreen in response to a user gesture
Not all platforms are equal. iOS Safari doesn’t have a fullscreen API, but we do on Chrome on Android, Firefox, and IE 11+. Most applications you build will use a combination of the JS API and the CSS selectors provided by the fullscreen specification. The main JS API’s that you need to care about when building a fullscreen experience are:
element.requestFullscreen()(currently prefixed in Chrome, Firefox, and IE) displays the element in fullscreen mode.
document.exitFullscreen()(currently prefixed in Chrome, Firefox and IE. Firefox uses
cancelFullScreen()instead) cancels fullscreen mode.
document.fullscreenElement(currently prefixed in Chrome, Firefox, and IE) returns true if any of the elements are in fullscreen mode.