Die meisten Browser bieten schon seit einiger Zeit die Möglichkeit, den Vollbild- oder Kioskmodus zu aktivieren. Die Chrome-Benutzeroberfläche des Browsers wird ausgeblendet und die Inhalte werden angezeigt. Bei Apps, die über den Chrome Web Store installiert wurden, konnten Nutzer die App sogar manuell konfigurieren, damit sie im Vollbildmodus ausgeführt wird, wenn sie über die Seite „Neuer Tab“ geöffnet wird. Manueller Vollbildmodus ist gut. Programmorientierter Vollbildmodus ist besser
Mit der Fullscreen API können Web-Apps programmatisch über JavaScript angeben, dass alle Inhalte auf der Seite den Vollbildmodus des Browsers aktivieren sollen. Das bedeutet, dass WebGL- und <canvas>-Spiele endlich vollständig immersiv werden können, Videos wie auf der Leinwand wirken und Onlinemagazine wie das Original erscheinen können. Ich liebe den Browser, aber wir sollten uns nicht von ihm einschränken lassen.
Wenn Sie die Details überspringen möchten, sehen Sie sich diese Demo an:
Wie funktioniert die API? Wenn Sie beispielsweise möchten, dass <div> in den Vollbildmodus wechselt, sagen Sie einfach Folgendes:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Um den Vollbildmodus zu beenden, stellt document eine Methode bereit:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Inhalte im Vollbildmodus werden im Darstellungsbereich des Browsers zentriert. Es liegt in der Verantwortung des Entwicklers, diese Inhalte so zu gestalten, dass sie optimal angezeigt werden. Normalerweise sollte Ihr <div> den gesamten Bildschirm einnehmen. Die gute Nachricht ist, dass die API neue CSS-Pseudo-Selektoren dafür enthält:
div:-webkit-full-screen {
width: 100% !important;
}
div:-moz-full-screen {
width: 100% !important;
}
div:-ms-fullscreen {
width: 100% !important;
}
div:fullscreen {
width: 100% !important;
}
/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
display: none;
}
:-moz-full-screen .tohide {
display: none;
}
:-ms-fullscreen .tohide {
display: none;
}
:fullscreen .tohide {
display: none;
}
Mit CSS-Pseudo-Selektoren können Sie Vollbildinhalte ganz einfach nach Belieben gestalten.
Die Vollbild-API ist in Chrome 15, Firefox 14, IE 11 und Opera 12.1 standardmäßig aktiviert. Weitere Informationen zur restlichen API findest du in der Spezifikation.
11. Oktober 2012 aktualisiert: Anpassung an die Spezifikationsänderungen. Das „S“ in requestFullscreen() wurde in Kleinbuchstaben geändert und document.webkitCancelFullScreen() in document.webkitExitFullscreen(). Kommentar zur Browserkompatibilität aktualisiert.
11. Februar 2014 aktualisiert: Präfixe für den IE hinzugefügt, die Standard-CSS-Syntax hinzugefügt und den Kommentar zur Browserkompatibilität aktualisiert. Vielen Dank an @dstorey und @patrickkettner.