JavaScript/Fullscreen

15min

einfach

• JavaScript
• Einstieg in CSS

Native Apps nehmen in der Regel die ganze Höhe und Breite des Viewports ein. Mit der Fullscreen API kannst du diesen Vollbild-Effekt auch bei normalen Webseiten erzielen. Die Taskleisten des Browsers und des Betriebssystems werden ausgeblendet, sodass nur die Webseite im Vollbildmodus sichtbar ist.

Browserunterstützung
caniuse.com

Ob eine Webseite im Vollbildmodus oder in klassischer Ansicht mit Browserzeile dargestellt wird, sollte der Nutzer entscheiden. Deshalb werden Nutzer beim Aktivieren der Vollbildansicht mit einer Systemmeldung gewarnt und über das mögliche Verlassen des Vollbildmodus mit ESC aufgeklärt.

Beachte:
Parallel zur Fullscreen API kann man Webseiten auch mit der Funktionstaste F11 in den Vollbildmodus ein- und wieder ausschalten. Dieser F11-Modus ist betriebssystem-, bzw. browserbasiert und kann nicht mit der Fullscreen API verändert und auch nicht mit :fullscreen gestylt werden.
Die Fullscreen API ist dagegen eher für die Vollbildansicht von Bildern, Videos und Spielen innerhalb eines Containers gedacht.

Verlassen des Vollbildmodus

Du kannst den Vollbildmodus bequem per Tastendruck mit ESC oder auch F11 verlassen oder die Methode exitFullscreen() aufrufen.

Vollbildmodus verlassen

function exitFullscreen() {
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

exitFullscreen();

Beim Verlassen des Vollbildmodus muss man nicht zwischen ganzer Seite, bzw. einzelnem Element unterscheiden.

Anwendungsbeispiel

Bild mit Lightbox-Effekt

In einem ersten Anwendungsbeispiel soll ein Bild in Vollbild-Großansicht dargestellt werden.

Achtung!

Um dieses Beispiel zu untersuchen, öffnen Sie bitte …

1. das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
2. den Seiteninspektor mit F12!

HTML: figure mit Bild und Button ansehen …

<p>
  Mit einem Klick auf das Bild öffnest du es im Vollbildmodus.<br>
  Mit <kbd>ESC</kbd> kehrst du zur klassischen Ansicht zurück.
</p>
<figure id="stage">
  <img src="https://wiki.selfhtml.org/images/a/ab/Peru-3.jpg" alt="Peru 2007: Machu Picchu">
  <button>Vollbildmodus ⛶</button>
</figure>

Da es bei Touchgeräten keine Tasten gibt und man deshalb nicht so aus dem Vollbild-Modus herauskommt, wurde die Seite noch um einen Button ergänzt.

Schalten in den Fullscreen-Modus ansehen …

	const stage  = document.querySelector('#stage'),
	      toggleButton = document.querySelector('#stage button');			
	stage.addEventListener('click', toggler);

	function toggler(event) { 
		console.log("toggler",window.matchMedia('(display-mode: fullscreen)').matches);
		if (window.matchMedia('(display-mode: fullscreen)').matches) {
			console.log('exit');
    	exitFullscreen();  
		} else { 
			console.log('enter');
    	enterFullscreen(stage); 
 		}
	}
	
	stage.addEventListener("fullscreenchange", updateButton);
	
	function updateButton(event) {
		console.log("fullscreenchange");
		toggleButton.classList.toggle('fullscreen');
		toggleButton.textContent = (toggleButton.textContent == 'Vollbildmodus ⛶') ? 'Vollbildmodus verlassen X' : 'Vollbildmodus ⛶';
	}


function enterFullscreen(element) {
  if(element.requestFullscreen) {
    element.requestFullscreen();
  } else if(element.webkitRequestFullscreen) {
    element.webkitRequestFullscreen();
  } else if(element.msRequestFullscreen) {       // for IE11 (remove June 15, 2022)
    element.msRequestFullscreen();
  }
}

function exitFullscreen() { console.log('exit');
  if(document.exitFullscreen) {
    document.exitFullscreen();
  } else if(document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  }
}

Das figure-Element erhält mit addEventListener einen Event-Handler, der bei einem Klick die Funktion toggler() aufruft:

Die Funktion überprüft mit matchMedia().matches , ob der display-mode im Fullscreen-Modus ist. Falls dies zutrifft, wird die oben besprochene Funktion exitFullscreen() , falls nicht enterFullscreen() aufgerufen. Anschließend wird der Button über eine Klasse fullscreen absolut oben rechts positioniert.

Beachte: Mit einem Klick auf F11 öffnest du die gesamte Seite im Vollbildmodus.

Mit einem weiteren Klick kehrst du zur klassischen Ansicht zurück.

Bei einem Klick auf Bild oder Button blenden die Browser eine Sicherheitswarnung ein, damit der Benutzer wieder in die gewohnte Ansicht zurückkehren kann. Diese verschwindet jedoch nach wenigen Sekunden.

Um dem Benutzer trotzdem volle Kontrolle zu geben, wurde der zusätzliche Button hinzugefügt.

Dieses Beispiel wurde ursprünglich im Januar 2017 veröffentlicht. Damals unterstützten noch nicht alle Browser den Vollbildmodus eines Elements. Deshalb wurde als zweites Beispiel der Vollbildmodus des gesamten Dokuments und die Formatierung des zu vergößernden Elements mit :fullscreen vorgestellt.

CSS: Gestaltung mit :fullscreen

Da ein Vollbild-Modus der gesamten Seite in allen Browsern funktioniert, wird in diesem Beispiel die gesamte Seite vergrößert und dann das Bild mit CSS auf die volle Größe skaliert.

Man kann über die Pseudoklasse :fullscreen auch abweichende Gestaltungsregeln für den Vollbildmodus festlegen. Hierbei müssen aber auch vendor-prefixes verwendet werden.

Browserunterstützung
caniuse.com

Gestaltung mit CSS

:-ms-fullscreen body {           /*  for IE11 (remove June 15, 2022)   */
  font-size: 2em;
}
:-webkit-full-screen body {     /* iOS Safari  */
  font-size: 2em;
}
:fullscreen body {
  font-size: 2em;
}

Beachte: Eine Kombination der verschiedenen Selektoren mit Kommata, da die Regelsätze ja identisch sind, ist nicht möglich. Die Browser ignorieren sonst die Festlegungen.
Die Schreibweise unterscheidet sich nicht nur durch die vendor-prefixes, sondern auch durch den Bindestrich zwischen full und screen bei den Webkit-Browsern (Safari).

Achtung!

Um dieses Beispiel zu untersuchen, öffnen Sie bitte …

1. das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
2. den Seiteninspektor mit F12!

Formatierung mit :fullscreen-Pseudoklasse ansehen …

  function toggleFullScreen() {
		var element = document.getElementById("stage");
    if (!document.Fullscreen && !document.webkitFullScreen && !document.msRequestFullscreen) {
      if(element.requestFullScreen) {
        element.requestFullScreen();
      } else if(element.webkitRequestFullScreen ) {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();	
     }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  }

In der Funktion toggleFullScreen() wird mit !document.Fullscreen (und den jeweiligen Versionen mit Browserpräfix) abgefragt, ob sich der Bildschirm nicht im Vollbildmodus befindet. wenn dies zutrifft, wird mit element.requestFullScreen der Vollbildmodus ein- sonst mit exitFullscreen (im Firefox: mozCancelFullScreen) wieder ausgeschaltet.

Beachte: In den webkit-Browsern Chrome und Opera funktioniert das Verlassen nur über die Tasten, bzw über den browserinternen Button.

Die Vergrößerung des Bilds wird nun mit CSS erreicht:

Beispiel ansehen …

:-ms-fullscreen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

:-webkit-full-screen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

:fullscreen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

figure { 
 width: 33%;
 float: right;
 margin-right: 2em;
}

figure img {
  width: 100%;
}

Auch wenn die gesamte Seite im Vollbildmodus angezeigt wird, ist nur das Bild mit seinen sich über den gesamten Viewport erstreckenden Maßen sichtbar. Mit object-fit können in allen Browsern außer dem IE Beschneidungen verhindert werden.

Beachte: Eine Kombination der verschiedenen Selektoren mit Kommata, da die Regelsätze ja identisch sind, ist nicht möglich. Die Browser ignorieren sonst die Festlegungen.

Hintergrund mit ::backdrop

Des Weiteren kann gerade bei der Anzeige von Bildern und Videos ein Hintergrund mit der Pseudoklasse ::backdrop festgelegt werden. Mit object-fit kann man die Größe der Bilder bestimmen.

Hintergrund mit ::backdrop-Pseudoklasse ansehen …

:fullscreen img {
  position: fixed;
  width: 70%;
  height: 70%;
  top: 15%; 
  left:15%;
  object-fit: contain;
  background: none;
}
      
:-webkit-full-screen::-webkit-backdrop { /* iOS Safari  */
  background-color: palegreen;
}
:fullscreen::backdrop {
  background-color: pink;
}

In diesem Beispiel wird das Bild auf 70% der Größe begrenzt. Der Rand um das Bild, bzw. der Hintergrund wird über :fullscreen::backdrop bzw. den entsprechenden vendor-prefix für iOS Safari farbig eingefärbt. (Das pink soll nur die Funktion demonstrieren; ändere die Farbe im Frickl!)

Kiosksystem

In einem Kiosksystem laufen Anwendungen, die Nutzern in einem geschlossenen Kiosk-Modus Informationen wie Wegweiser oder eine interne Suchfunktion zur Verfügung stellen. Da hier die verwendeten URLs sowie die Taskleiste des Betriebssystems für den Benutzer nicht wichtig sind, werden sie oft im Vollbildmodus dargestellt.

Für Interessierte, die von zu Haus aus die Seiten besuchen, werden die Inhalte in klassischer Ansicht präsentiert.

Weblinks

• WHATWG: Fullscreen API
• MDN: Using fullscreen mode
• David Walsh: Fullscreen API (23.12.2013)
• developers.google: Making Fullscreen Experiences
• sitepoint: How to Use the HTML5 Full-Screen API (Again) von Craig Buckler
• tutsplus: Weekly Inspiration: Full-on Full Screen Home Pages
• the webflash: Fullscreen Mode Using the HTML5 Fullscreen API