Question

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?

Answer 1

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
}