Detect Fullscreen Changes in Real-Time with JavaScript

In today's web applications and interactive content, dynamically adapting to screen changes is crucial. Monitoring when an application enters or exits fullscreen mode can enhance user experience significantly. Javascript offers robust tools to detect fullscreen changes in real-time, allowing developers to handle layout adjustments or trigger specific functionalities accordingly.

Why Detect Fullscreen Changes?

Fullscreen modes are increasingly used for apps like video players, games, and immersive presentations. These apps may need to:

• Hide navigation bars to maximize viewing area.
• Pause or resume activities based on the user's focus.
• Change layout or content format for enhanced display on fullscreen.
• Log user interactions for analytics purposes.

Using the Fullscreen API

The Fullscreen API provides methods and properties to enter or exit fullscreen mode, as well as to detect changes.

Here's a simple example of requesting fullscreen for an element:

const element = document.documentElement; // refer to the entire page

function requestFullscreen() {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

Similarly, exiting fullscreen mode can be accomplished as follows:

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
  }
}

Detecting Fullscreen Changes

JavaScript allows us to listen for fullscreen changes through events. This enables our application to respond immediately when a user enters or exits fullscreen mode.

The fullscreenchange event is triggered whenever there is a change in the fullscreen mode:

document.addEventListener('fullscreenchange', (event) => {
  if (document.fullscreenElement) {
    console.log('Entered fullscreen mode');
  } else {
    console.log('Exited fullscreen mode');
  }
});

For cross-browser support, you might need to handle vendor-prefixed variations:

document.addEventListener('webkitfullscreenchange', onFullScreenChange);
document.addEventListener('mozfullscreenchange', onFullScreenChange);
document.addEventListener('msfullscreenchange', onFullScreenChange);

function onFullScreenChange(event) {
  if (document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.fullscreenElement) {
    console.log('Entered fullscreen mode');
  } else {
    console.log('Exited fullscreen mode');
  }
}

Practical Scenarios

Here are a few practical usages of detecting fullscreen changes:

• Playing Video Content: Automatically adjust video quality or load subtitles when the video is in fullscreen for better performance.
• Interactive Applications: Certain game libraries pause or mute sound when exiting fullscreen to ensure a seamless player experience.
• Presentation Displays: Customizable themes or transitions when entering fullscreen during a presentation.

Conclusion

Detecting and responding to fullscreen changes allows web applications to offer a more immersive and intuitive user experience. By leveraging the Fullscreen API and handling events effectively, developers can create dynamic, user-friendly applications that adapt seamlessly to fullscreen transitions.

Incorporate these techniques into your projects to ensure your applications provide an engaging and responsive environment on any device or screen size.