CODEWITHSUNDEEP
javascriptcross-browser
Félix Paradis
Félix Paradis

Reputation: 6021

How to detect fullscreen api support with pure javascript?

This is the API I'm referring to: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API

As for what I've tried so far:

Modernizr has the Modernizr.fullscreen thing, but I don't feel like using yet another library for what seems like a simple task.

So I'm digging the source code of Modernizr to try and see how they do it, after all Modernizr does use JS to figure it out, right? But so far all I found about the fullscreen API in their source code is this file (Modernizr/feature-detects/fullscreen-api.js)

/*!
{
  "name": "Fullscreen API",
  "property": "fullscreen",
  "caniuse": "fullscreen",
  "notes": [{
    "name": "MDN Docs",
    "href": "https://developer.mozilla.org/en/API/Fullscreen"
  }],
  "polyfills": ["screenfulljs"],
  "builderAliases": ["fullscreen_api"]
}
!*/
/* DOC
Detects support for the ability to make the current website take over the user's entire screen
*/
define(['Modernizr', 'prefixed'], function(Modernizr, prefixed) {
  // github.com/Modernizr/Modernizr/issues/739
  Modernizr.addTest('fullscreen', !!(prefixed('exitFullscreen', document, false) || prefixed('cancelFullScreen', document, false)));
});

...and I don't quite understand that code. yet.

Upvotes: 6

Views: 1464

Answers (1)

tomcek112
tomcek112

Reputation: 1626

The following snippet seems to be the best solution:

const fullScreenAvailable = document.fullscreenEnabled || 
                            document.mozFullscreenEnabled ||
                            document.webkitFullscreenEnabled ||
                            document.msFullscreenEnabled

Upvotes: 7

Related Questions