javascript fullscreen

// full screen using the Fullscreen API
function openFullscreen() {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();
  } else if (document.documentElement.mozRequestFullScreen) { /* Firefox */
    document.documentElement.mozRequestFullScreen();
  } else if (document.documentElement.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    document.documentElement.webkitRequestFullscreen();
  } else if (document.documentElement.msRequestFullscreen) { /* IE/Edge */
    document.documentElement.msRequestFullscreen();
  }
}

// full screen using the Fullscreen API
function closeFullscreen() {
  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();
  }
}

// fullscreen using the css property
function openFullscreenCSS() {
 document.documentElement.style.setProperty('--fullscreen', '100vh');
}

// close fullscreen using css property
function closeFullscreenCSS() {
 document.documentElement.style.setProperty('--fullscreen', 'auto');
}

// HTML
<div class="main" style="--fullscreen: auto;">
  <button onclick="openFullscreen()">Open Fullscreen</button>
  <button onclick="closeFullscreen()">Close Fullscreen</button>
  <button onclick="openFullscreenCSS()">Open Fullscreen with CSS</button>
  <button onclick="closeFullscreenCSS()">Close Fullscreen with CSS</button>
</div>

Fullscreen mode is a feature of modern web browsers that allow the user to expand the size of a website beyond the size of their monitor. This can be useful for viewing websites on larger displays or for seeing more content at once. It can also be used to create a more immersive experience for interactive websites. There are a few different ways to achieve fullscreen mode with JavaScript. The Fullscreen API is a browser API that allows websites to request fullscreen mode for the user. This API is available on most modern browsers, and allows the website to request fullscreen mode with the requestFullscreen() method. This method takes no parameters, and can be used to open fullscreen mode just by calling it. If the user desires, they can also exit fullscreen mode with the exitFullscreen() method. Another way to achieve fullscreen mode is to use CSS. By setting the style property --fullscreen to be equal to 100vh, the website element can be set to fullscreen mode. 100vh stands for 100% of the viewport height, which is the same as the user’s monitor size. To return the element to its original size, the --fullscreen style property can be set to auto. An example of how these methods can be used can be seen in the code snippet above. The openFullscreen() and closeFullscreen() methods are used to open and close fullscreen mode with the Fullscreen API, and the openFullscreenCSS() and closeFullscreenCSS() methods are used to open and close fullscreen mode with CSS. In the HTML, a div is created and given the --fullscreen style property that is set to auto by default. This allows the fullscreen mode to be toggled on and off with the provided methods.