How to detect fullscreen mode changes in different browsers?

Answers:

Detecting fullscreen mode changes in web applications can be accomplished using the Fullscreen API, which is supported in most modern browsers. The API provides events that allow developers to listen for changes in the fullscreen state and adjust the UI or behavior of the application accordingly.

Here’s how you can detect fullscreen mode changes and handle them in different browsers:

Basic Implementation:

Event Listeners: You can listen for the fullscreenchange event to detect when the fullscreen mode changes.
Detect Fullscreen State: Use document.fullscreenElement (for standard HTML Fullscreen API) to check if an element is in fullscreen mode.

Example Code

// Function to handle fullscreen change
function onFullscreenChange() {
    if (document.fullscreenElement) {
        console.log('Entered fullscreen mode');
    } else {
        console.log('Exited fullscreen mode');
    }
}

// Add fullscreen change event listener
document.addEventListener('fullscreenchange', onFullscreenChange);
document.addEventListener('webkitfullscreenchange', onFullscreenChange); // Safari
document.addEventListener('mozfullscreenchange', onFullscreenChange); // Firefox
document.addEventListener('MSFullscreenChange', onFullscreenChange); // IE/Edge

// Function to request fullscreen
function requestFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
}

// Function to exit fullscreen
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }
}

// Example usage: Attach requestFullscreen to a button click
document.getElementById('fullscreen-button').addEventListener('click', function() {
    const element = document.documentElement; // or any specific element
    if (document.fullscreenElement) {
        exitFullscreen();
    } else {
        requestFullscreen(element);
    }
});

Notes

Browser Prefixes: The Fullscreen API is supported with vendor prefixes in some browsers. Always include the prefixed versions for maximum compatibility.
User Interaction Required: Most browsers require a user gesture (like a button click) to enter fullscreen mode due to security and user experience concerns.
Different Events: The event to listen for changes varies across different browsers:
- fullscreenchange: Standard event for modern browsers.
- webkitfullscreenchange: For Safari.
- mozfullscreenchange: For Firefox.
- MSFullscreenChange: For Internet Explorer and Edge.

Testing and Debugging

Always test across different browsers and devices to ensure consistent behavior.
Use the developer console in each browser to check for messages and errors when entering/exiting fullscreen.