Skip to main content

How to Detect if the Browser is in Fullscreen Mode in JavaScript

Detecting when a web page is in fullscreen mode is essential for creating immersive experiences, such as for games, video players, or presentations. However, it's crucial to understand that there are two different types of "fullscreen":

  1. Browser UI Fullscreen: This is when the user presses F11 (or a similar key) to hide the browser's own UI (address bar, tabs, etc.).
  2. Fullscreen API Mode: This is when a specific HTML element is programmatically made to fill the screen using the requestFullscreen() JavaScript API.

This guide will teach you the correct and modern methods for detecting both of these modes.

The Fullscreen API is the modern standard for creating fullscreen experiences. It provides a reliable way to check if an element is currently in fullscreen mode and to listen for changes.

You can check the document.fullscreenElement property:

  • If the document is in Fullscreen API mode, this property will be the element that is currently fullscreen.
  • If the document is not in Fullscreen API mode, this property will be null.

To react to changes, you should listen for the fullscreenchange event.

For example, we need a reliable way to know when our web app enters or exits the programmatic fullscreen state.

// Function to check the current state
function isFullscreenApiActive() {
  return document.fullscreenElement !== null;
}

// Initial check
console.log('Is Fullscreen API active?', isFullscreenApiActive());

// Listen for changes
document.addEventListener('fullscreenchange', () => {
  if (isFullscreenApiActive()) {
    console.log('✅ Entered Fullscreen API mode.');
  } else {
    console.log('⛔️ Exited Fullscreen API mode.');
  }
});
note

This is the most robust and recommended method for any application that uses the Fullscreen API.

Method 2: Detecting the Browser UI (F11) Fullscreen​

Detecting when the user presses F11 is trickier because there is no direct, reliable event for this. The common workaround is to listen for the resize event and compare the window's dimensions to the screen's dimensions.

Warning: This method is a heuristic (an educated guess) and is not 100% reliable. It can produce false positives if the user manually resizes their browser window to be exactly the size of their screen.

The logic:

  • The window.innerHeight property gives the height of the viewport.
  • The screen.height property gives the total height of the user's screen.
  • If these two values are equal, it's highly likely that the browser's UI has been hidden by the F11 key.

Solution:

window.addEventListener('resize', () => {
  const isF11Fullscreen = window.innerHeight === screen.height;

  if (isF11Fullscreen) {
    console.log('Likely in F11 fullscreen mode.');
  } else {
    console.log('Not in F11 fullscreen mode.');
  }
});
note

This method is useful for detecting the F11 state but should be used with the understanding that it is not a perfect solution.

How to Programmatically Toggle Fullscreen API Mode​

The Fullscreen API allows you to request that a specific element enters fullscreen mode, which is perfect for video players or games.

For example, this function toggles the entire page in and out of fullscreen mode.

function toggleFullscreen() {
  if (!document.fullscreenElement) {
    // If not in fullscreen, request it for the whole page
    document.documentElement.requestFullscreen().catch(err => {
      console.error(`Error attempting to enable fullscreen mode: ${err.message}`);
    });
  } else {
    // If in fullscreen, exit it
    if (document.exitFullscreen) {
      document.exitFullscreen();
    }
  }
}

// You can attach this to a button click
const myButton = document.getElementById('my-button');
myButton.addEventListener('click', toggleFullscreen);
note

When this function is called, it will trigger the fullscreenchange event that we set up in Method 1.

Conclusion: Which Method Should You Use?​

The correct method depends entirely on which type of fullscreen you care about.

  • If your application uses the JavaScript Fullscreen API (e.g., a video player with a "fullscreen" button), you should always use the document.fullscreenElement property and the fullscreenchange event. This is the modern, standard, and reliable approach.
  • If you specifically need to detect when the user presses F11 to hide the browser's own UI, the resize event with a height comparison is the only available, albeit imperfect, method.

For creating immersive web applications, you should always prefer to use the Fullscreen API and its corresponding detection methods.

Table of Contents