Detect if the Browser is in fullscreen mode in JavaScript

# Table of Contents

# Detect if the Browser is in fullscreen mode in JavaScript

To detect fullscreen mode in JavaScript:

Check if the max height of the window in pixels is equal to the current height of the screen in pixels.
If the condition is met, the browser is in fullscreen mode.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
if (window.innerHeight === screen.height) {
  console.log('The browser is in fullscreen mode');
} else {
  console.log('The browser is NOT in fullscreen mode');
}

The code for this article is available on GitHub

Here is a short clip that demonstrates how this works.

check if browser is in fullscreen mode

You can press F11 to toggle fullscreen mode on most browsers.

The window.innerHeight property returns the interior height of the window in pixels, including the height of the horizontal scroll bar (if present).

The screen.height property returns the height of the screen in pixels.

If the interior height of the window is equal to the height of the screen, then the browser is in fullscreen mode.

# Detect if the Browser is in fullscreen mode using the `resize` event

If you want to detect whether the browser is in fullscreen mode dynamically, use the resize event.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

Here is the related JavaScript code.

index.js

Copied!
window.addEventListener('resize', function handleResize(event) {
  if (window.innerHeight === screen.height) {
    console.log('The browser is in fullscreen mode');
  } else {
    console.log('The browser is NOT in fullscreen mode');
  }
});

The code for this article is available on GitHub

The code sample is very similar to the one in the previous subheading.

We check if the max height of the screen is equal to the current height.

If the condition is met, the browser is in fullscreen mode.

We used the document.addEventListener method to track the resize event.

The resize event is triggered when the document view has been resized.

Here is a short clip that demonstrates how this works.

detect browser fullscreen mode using resize event

Pressing F11 on my keyboard toggles the fullscreen mode.

If the browser is in fullscreen mode, the if block runs, otherwise, the else block runs.

# Toggling fullscreen mode when a certain key is pressed

If you need to toggle fullscreen mode when a user presses a certain key, e.g. Enter, set up a keydown event listener.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
document.addEventListener(
  'keydown',
  event => {
    if (event.key === 'Enter') {
      toggleFullScreenMode();
    }
  },
  false,
);

function toggleFullScreenMode() {
  if (document.fullscreenElement == null) {
    console.log('Switching to fullscreen mode');
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    console.log('Exiting fullscreen mode');
    document.exitFullscreen();
  }
}

toggle fullscreen mode when certain key is pressed

The code for this article is available on GitHub

The keydown event is triggered when a key is pressed.

I've written a detailed article on how to detect when the Enter key is pressed in React.

When the user presses Enter, we toggle fullscreen mode in the browser.

The requestFullscreen() method issues an async request to make the element on which it was called fullscreen mode.

We called the method on the documentElement property of the document object.

The property returns the root element of the document (the html element).

index.js

Copied!
function toggleFullScreenMode() {
  if (document.fullscreenElement == null) {
    console.log('Switching to fullscreen mode');
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    console.log('Exiting fullscreen mode');
    document.exitFullscreen();
  }
}

The code for this article is available on GitHub

The document.fullscreenElement property returns the element that is currently rendered in fullscreen mode in the document or null if the document is not in fullscreen mode.

If the document is not in fullscreen mode, we use the requestFullscreen method to transition the browser to fullscreen mode.

Otherwise, we use the exitFullscreen() method to exit fullscreen mode.

# Detect fullscreen module using the `fullscreenchange` event

You can also use the fullscreenchange event to detect fullscreen mode.

The event is triggered after the browser switches into or out of fullscreen mode.

However, note that the event isn't triggered when the user presses F11.

Rather, it is triggered when you use the HTML5 fullscreen JavaScript API.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="box">bobbyhadz.com</div>

    <button id="toggle-fullscreen-btn">
      Toggle fullscreen mode
    </button>

    <script type="module" src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
document.addEventListener('fullscreenchange', function () {
  if (document.fullscreenElement != null) {
    console.log('You are in fullscreen mode');
  } else {
    console.log('Exited fullscreen mode');
  }
});

function toggleFullScreenMode(event) {
  if (document.fullscreenElement == null) {
    document.documentElement.requestFullscreen();
  } else if (document.exitFullscreen) {
    document.exitFullscreen();
  }
}

const button = document.getElementById('toggle-fullscreen-btn');

button.addEventListener('click', toggleFullScreenMode);

The code for this article is available on GitHub

Here is a short clip that demonstrates how this works.

detect fullscreen mode using fullscreenchange event

When the user clicks on the button, the toggleFullScreenMode function is invoked and it toggles fullscreen mode.

This triggers the fullscreenchange event and prints a message to the console.

However, note that the fullscreenchange event wouldn't trigger if you press F11.

The event is only triggered when you use the HTML5 fullscreen JavaScript API.

If you want to also track F11 key presses, use the resize event from the previous subheading.

I've also written an article on how to open a link in a new tab on button click.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Detect if the Browser is in fullscreen mode in JavaScript

# Table of Contents