css 全屏API - HTML5 API - http://www.starstormdesign.de/fullscreen-api-html5/

Posted 2021-05-13

if (
  document.fullscreenEnabled ||
  document.webkitFullscreenEnabled ||
  document.mozFullScreenEnabled ||
  document.msFullscreenEnabled
) {
  // Das API ist verfügbar.
}

var img = document.getElementById("my-image");
 
// Bild im Vollbild öffnen
if (img.requestFullscreen) {
  img.requestFullscreen();
} else if (img.webkitRequestFullscreen) {
  img.webkitRequestFullscreen();
} else if (img.mozRequestFullScreen) {
  img.mozRequestFullScreen();
} else if (img.msRequestFullscreen) {
  img.msRequestFullscreen();
}

if(document.exitFullscreen) {
  document.exitFullscreen();
} else if(document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} else if(document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
} else if(document.msExitFullscreen) {
  document.msExitFullscreen();
}

document.addEventListener("fullscreenchange", fullscreenStatusChangedHandler);
document.addEventListener("webkitfullscreenchange", fullscreenStatusChangedHandler);
document.addEventListener("mozfullscreenchange", fullscreenStatusChangedHandler);
document.addEventListener("MSFullscreenChange", fullscreenStatusChangedHandler);

document.addEventListener("fullscreenerror", fullscreenErrorHandler);
document.addEventListener("webkitfullscreenerror", fullscreenErrorHandler);
document.addEventListener("mozfullscreenerror", fullscreenErrorHandler);
document.addEventListener("MSFullscreenError", fullscreenErrorHandler);

:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen,
:fullscreen {
  /* Eigenschaften */
}

::backdrop,
::-ms-backdrop {
  /* Eigenschaften */
}