Detect Fullscreen Mode

Detect fullscreen mode

As you have discovered, browser compatibility is a big drawback. After all, this is something very new.

However, since you're working in JavaScript, you have far more options available to you than if you were just using CSS.

For example:

if( window.innerHeight == screen.height) {
    // browser is fullscreen
}

You can also check for some slightly more loose comparisons:

if( (screen.availHeight || screen.height-30) <= window.innerHeight) {
    // browser is almost certainly fullscreen
}

Display text depending on whether fullscreen is supported and whether already in fullscreen mode or not

You need to trigger the full screen mode by calling .documentElement.requestFullscreen() on your document, I added a button to trigger this on button click, this snippet here might not work because stackoverflow snippets are sandboxed and with limited access.

Here a working fiddle

updated answer:

I changed the code to have the button trigger the fullscreen and switch it back once the tab is in full screen mode, also you will notice that I removed document.write() (seems it causes the full screen exit event to trigger) and replaced it with a <p> tag to act as a logging placehoder for text when in the tab is in full screen or not, I added a check on document.fullscreenElement to toggle the <p> and <button> tags text one we execute displayButton() inside the event listener.

document.getElementById("full-screen").addEventListener("click", function () {

  if (!document.fullscreenElement) {

    document.documentElement.requestFullscreen();

  } else {

    if (document.exitFullscreen) {

      document.exitFullscreen();

    }

  }

});

document.addEventListener("fullscreenchange", function (event) {

  displayButton();

});

function displayButton() {

  if (document.fullscreenElement) {

    document.querySelector(".log").innerHTML =

      "you are in full screen! click the button to toggle back!";

    document.getElementById("full-screen").textContent = "exit full screen";

  } else {

    document.getElementById("full-screen").textContent = "full screen";

    document.querySelector(".log").innerHTML =

      "Not in full screen! press <strong>`full screen</strong> button to make the browser full screen.";

  }

}

document.querySelector(".log").innerHTML =

  "Not in full screen! press <strong>`full screen</strong> button to make the browser full screen.";

<!DOCTYPE html>

<html lang="en">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <link href="https://fonts.googleapis.com/css?family=Heebo:400,500&display=swap" rel="stylesheet" />

        <style></style>

    </head>

    <body>

      <div class="log"></div>

      <button id="full-screen">

      full screen

      </button>

    </body>

</html>

How can I detect if a video is full screen using JS/JQuery?

For this to work you need to listen for the fullscreenchange event (including the vendor-specific versions). Then you can use the document.fullscreenElement property to determine which video which is currently fullscreen and amend the muted property accordingly. Try this:

$('video').on('fullscreenchange webkitfullscreenchange mozfullscreenchange', function() {
  this.muted = document.fullscreenElement !== this;
});

This will work for any video element you have on your page.

Here's a working example in a jsFiddle, which is required as SO snippets disallow fullscreen video.

How to detect when Mapbox/Leaflet enters or exits fullscreen mode

I know this is a late response but to anyone in the future this is how I approached it (for mapbox GL JS (without leaflet).

map.on("resize", () => {
    if (document.fullscreenElement) // do something
});

You can give the map wrapper div a name and exclusively also check if the map is what triggered the fullscreen event

map.on("resize", () => {
    if (document.fullscreenElement?.attributes.name.value === "mapWrapper") // do something
});

And if you are using React you can use a state to hold this information.

const [isFullScreen, setIsFullScreen] = useState();
...
map.on("resize", () => {
  setIsFullScreen(
    document.fullscreenElement?.attributes.name.value === "mapWrapper"
  );
});
...
if (isFullScreen) //do something

How to detect browser has gone to full screen

I haven't tested this for reliability but this is my take.

  //without jQuery
window.addEventListener('resize', function(){
  if(screen.width === window.innerWidth){
   // this is full screen
  }
});

  //with jQuery
$(document).ready(function() {
  $(window).on('resize', function(){
    if(screen.width === window.innerWidth){
      // this is full screen
    }
  });
});

This seems to work when pressing the F11 button and other methods, so it should catch the edge cases that the full screen api does not. Although I'm not sure the comparison of screen.width vs. window.innerWidth is a reliable way to check for full screen. Maybe someone else can add to/critique this.

Detect Fullscreen Mode