how to detect a browser supports requestFullscreen

Question

How can I detect a browser supports requestFullscreen or not?

I have these codes below to make chrome, safari, firefox, and opera (not entirely working) to make a document fullscreen, but I want to detect the browser supports requestFullscreen or not. What should I do?

 $('.button-fullscreen').click(function(){ 

    var docElm = document.documentElement;

    // W3C Proposal
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }

    // mozilla proposal
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();          
    }

    // Webkit (works in Safari and Chrome Canary)
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen(); 
    }

    return false;
});

$('.button-sound').click(function(){               

    // W3C Proposal
    if (document.exitFullscreen) {
        document.exitFullscreen();
    }

    // mozilla proposal
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }

    // Webkit (works in Safari and Chrome Canary)
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }

    return false;
});

score 3 · Answer 1 · edited Jun 28 '13 at 13:45

3

When you put if (docElm.requestFullscreen), you are detecting if the browser supports that method because it will return true if requestFullscreen is defined on the docElmobject.

edited Jun 28 '13 at 13:45

Joe

15,205
8
49
56

answered Jun 28 '13 at 13:27

offthat

400
2
10

score 2 · Accepted Answer · answered Jun 28 '13 at 13:32

2

Use the modernizr framework to avoid testing for n vendor prefixes...

Modernizr.prefixed('requestFullscreen', document.documentElement)

answered Jun 28 '13 at 13:32

bastos.sergio

6,684
4
26
36

Modernizr currently relies on https://github.com/sindresorhus/screenfull.js if you want to cut out the middleman – harvzor Nov 20 '18 at 13:08

score 1 · Answer 3 · answered Aug 23 '20 at 14:16

Extracting the ideas from screenful this seems to work

  const canFullscreen = (function() {
    for (const key of [
        'exitFullscreen',
        'webkitExitFullscreen',
        'webkitCancelFullScreen',
        'mozCancelFullScreen',
        'msExitFullscreen',
      ]) {
      if (key in document) {
        return true;
      }
    }
    return false;
  }());


  if (canFullscreen) {
    // supported
  } else {
    // not-supported
  }

note: for my purposes I didn't need a library to do fullscreen. I just needed code to detect if it's possible as I'm using some other library that goes can go fullscreen but I needed to know whether or not to display the an option to go fullscreen to then call into that library. In other words, if canFullscreen show button, else don't.

what @gman mentioned above worked for me with a tweak. Just check for 'exitFullscreen', because others can be included in the document even though it is not supported. I've tested it on Chrome, Firefox, Edge, and Safari. With the above tweak only on Safari canFullScreen is set to false --where it is not supported. All other browsers which sets it to true supports fullscreen too. — user2995358, Feb 03 '21 at 01:37

how to detect a browser supports requestFullscreen

3 Answers3

Linked