onfullscreenchange DOM event

I was working with this event when I stumble with this question, I want to share what I learn about it even though it won't solve this question. The onfullscreenchange event is now supported with prefixes by modern desktop browsers and Chrome for Android, but there are some things to have in mind:

• This event won't trigger when the window goes fullscreen, I know it sounds weird, but it seems to be intended only for the document and its elements. So if an element of a document goes fullscreen the event will trigger, but when a keyboard shortcut is used to make your browser fullscreen it won't.

• In Chrome and Safari a function can subscribe to this event either by defining the document method document.onwebkitfullscreenchange = myFunc; or by defining the element method myElem.onwebkitfullscreenchange = myFunc;, also you can use addEventListener myElem.addEventListener("webkitfullscreenchange", myFunc);. In IE and Firefox the event will work only if the method is defined in the document and using addEventListener won't trigger the event.

Here's a Codepen Demo of this event, more info in MDN Using fullscreen mode.

---

Update. From MDN web docs:

For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen).

screen.width and screen.height tell you the user's screen resolution, so try this:

var fullscreen;
function onfullscreenchange(full) {
    ...
}

// You might want to use addEventListener and its equivalents instead
window.onresize = function () {
    if (window.outerWidth === screen.width && window.outerHeight === screen.height) {
        if (!fullscreen) {
            fullscreen = true;
            onfullscreenchange(true);
        }
    } else {
        if (fullscreen) {
            fullscreen = false;
            onfullscreenchange(false);
    }
};

I'm aware this isn't the cleanest or most robust way of doing all this, but hopefully it gives you an idea. Notably, IE<9 needs a different approach for determining the window size, so I'll leave you to look that up.

A slightly other approach using a media query and a fallback to the window.document.fullscreenElement.

This works on Chrome whether it's a click/touch event or the F11 key being pressed.

function fullscreenEvent(fullscreen) {
    ...
}

window.onresize = function () {
    if (window.matchMedia('(display-mode: fullscreen)').matches ||
    window.document.fullscreenElement) {
       fullscreenEvent(true);
    } else {
       fullscreenEvent(false);
    }
}