3

Possible Duplicate:
Detecting if a browser is in full screen mode

I'm working on a feature that doesn't behave correctly on Mac OSX when Chrome or FF are in fullscreen. When they are just maximized it works fine. I would like to exclude those browsers from this feature when (and only when) they are in fullscreen. I am having trouble finding a way to detect this though. Does anyone have experience or pointers?

Community
  • 1
  • 1
Dave Maple
  • 8,102
  • 4
  • 45
  • 64

4 Answers4

4

I think you can check if the fullscreenElement is "not null". Unfortunaly they are all named differently in different browsers, so you need to do something like:

if ( document.mozFullScreenElement || 
     document.webkitCurrentFullScreenElement ||
     document.fullscreenElement ) { console.log('FULLSCREEN!'); }

Docs (mozilla): https://developer.mozilla.org/en-US/docs/DOM/document.mozFullScreenElement

You can also attach event handlers to manually keep track of fullscreen states:

document.addEventListener( 'fullscreenchange', handler, false );
document.addEventListener( 'mozfullscreenchange', handler, false );
document.addEventListener( 'webkitfullscreenchange', handler, false );

function handler() {
    // fullscreen mode changed
}
David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • seems to always log ... even when the browser is not fullscreen .. but perhaps checking for not null and true is the way to go. Will try that next. – Dave Maple Oct 29 '12 at 17:54
  • I just edited... webkit uses `document.webkitCurrentFullScreenElement` so try that too. – David Hellsing Oct 29 '12 at 17:55
  • Edited again... you should probably check for truthy values of the properties instead of null, it should be more safe as they can also be undefined. – David Hellsing Oct 29 '12 at 17:57
  • still get a report that I'm in fullscreen no matter what when testing in Chrome with the latest version. – Dave Maple Oct 29 '12 at 18:00
  • same in FF -- always logs as fullscreen – Dave Maple Oct 29 '12 at 18:00
  • Strange, I get undefined in chrome & firefox when running `console.log( document.mozFullScreenElement || document.webkitCurrentFullScreenElement || document.fullscreenElement )` in non-fullscreen mode. – David Hellsing Oct 29 '12 at 18:03
  • oh sorry didn't see you had removed the null checks. now it never seems to log in FF. – Dave Maple Oct 29 '12 at 18:03
  • In Mac OSX running the latest FF and Chrome versions all of those properties return either undefined or null, regardless of whether the browser is fullscreen. There doesn't seem to be a way to use the property to tell what state the browser is in. – Dave Maple Oct 29 '12 at 18:10
  • OK, then your testcase must be different from mine. It might have something to do with what element you call fullscreen upon, and perhaps the timing. If you can find a way, try to post a jsbin example next time. – David Hellsing Oct 29 '12 at 18:27
  • http://jsbin.com/welcome/41174/ – Dave Maple Oct 29 '12 at 18:49
  • ...but that test case is not even in fullscreen mode...? How would you expect it to return true? – David Hellsing Oct 29 '12 at 19:05
  • The code should return true if the mac osx browser is in fullscreen mode, basically mirroring the behavior of window.fullScreen in Firefox. To make it return true you would simply cmd+shift+f into fullscreen and refresh the test page. – Dave Maple Oct 29 '12 at 19:56
1

You could check the dimensions of the viewport. If it matches a common screen size like 1024x768 or 1920x1080 then you're probably in full-screen mode.

Halcyon
  • 57,230
  • 10
  • 89
  • 128
1

You could try the following code:

if (screen.width == window.innerWidth && screen.height == window.innerHeight) {
    //full web browser
}
ajtrichards
  • 29,723
  • 13
  • 94
  • 101
1

There are some properties you can look at to figure this out, though I highly recommend testing as I have seen some quirkiness in the values they report in FF vs Chrome vs IE especially with dual monitor setups.

screen.avalHeight and screen.availWidth give the screen resolution, while window.outerHeight and window.outerWidth give the window size.

Just check if they match.

Hippocrates
  • 2,510
  • 1
  • 19
  • 35
  • yeah as you pointed out this seems to have problems when running with dual monitors. The values i get don't equate or correlate. – Dave Maple Oct 29 '12 at 17:45