Die meisten Browser bieten schon seit einiger Zeit die Möglichkeit, in den Vollbildmodus oder den Kioskmodus zu wechseln. Das bedeutet, dass die Chrome-Benutzeroberfläche des Browsers aus dem Weg geräumt wird und der Inhalt übernimmt. Bei Apps, die aus dem Chrome Web Store installiert wurden, konnten Nutzer eine App sogar manuell konfigurieren, damit sie im Vollbildmodus ausgeführt wird, wenn sie über die Seite „Neuer Tab“ geöffnet wird. Manueller Vollbildmodus ist in Ordnung. Programmatische Vollbildanzeigen sind besser!
Mit der Fullscreen API können Web-Apps programmatisch beliebige Inhalte auf der Seite über JavaScript in den Vollbildmodus des Browsers wechseln. So können WebGL- und <canvas>-Spiele endlich fesselnd wirken, Videos wie eine Kinoleinwand und Onlinezeitschriften wie ein echtes Spielerlebnis. Ich liebe den Browser, aber wir sollten ihn nicht einschränken :)
Wenn Sie die Details überspringen möchten, finden Sie hier eine Demo:
Wie funktioniert die API? Wenn du beispielsweise möchtest, dass ein <div> im Vollbildmodus angezeigt wird, sag ihm einfach Folgendes:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Zum Beenden des Vollbildmodus stellt document dafür eine Methode bereit:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Inhalte im Vollbildmodus sind im Darstellungsbereich des Browsers zentriert. Es liegt an den Entwickler:innen, die Inhalte so zu gestalten, dass sie für sie am besten geeignet sind. In der Regel sollte die <div> die gesamte Fläche des Bildschirms einnehmen. Die API enthält dazu neue CSS-Pseudoselektoren:
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-Pseudoselektoren können Sie ganz einfach Vollbildinhalte nach Ihren Wünschen gestalten.
Die Fullscreen API ist in Chrome 15, FF 14, IE 11 und Opera 12.1 standardmäßig aktiviert. Weitere Informationen zum Rest der API finden Sie in der Spezifikation.
Aktualisiert am 11.10.2012: Anpassung an Spezifikationsänderungen. Das "S" wurde in requestFullscreen() kleingeschrieben und document.webkitCancelFullScreen() in document.webkitExitFullscreen() geändert. Kommentar zur Browserkompatibilität aktualisiert.
Aktualisiert am 11.02.2014: Präfixe für Internet Explorer werden eingebunden, die standardmäßige CSS-Syntax wird hinzugefügt und der Kommentar zur Browserkompatibilität aktualisiert. Vielen Dank an @dstorey und @patrickkettner.