De meeste browsers hebben al een tijdje de mogelijkheid om naar een volledig scherm- of kioskmodus te gaan. Kortom, de Chrome-gebruikersinterface van de browser verdwijnt en de inhoud neemt het over. Voor apps die vanuit de Chrome Web Store zijn geïnstalleerd, is het zelfs mogelijk voor gebruikers om handmatig een app zo te configureren dat deze op volledig scherm wordt uitgevoerd wanneer deze wordt geopend vanaf de pagina 'Nieuw tabblad'. Handmatig volledig scherm is goed. Programmatisch volledig scherm is beter!
Met de Fullscreen API kunnen webapps programmatisch alle inhoud op de pagina vertellen om vanuit JavaScript naar de weergavemodus op volledig scherm van de browser te gaan. Dit betekent dat WebGL- en <canvas> -games eindelijk volledig meeslepend kunnen worden, video's kunnen aanvoelen als het witte doek en online tijdschriften kunnen aanvoelen als het echte werk. Ik ben dol op de browser, maar we moeten ons er niet door beperken :)
Als je de details wilt overslaan, is hier een demo :
Hoe werkt de API? Als je bijvoorbeeld wilt dat een <div> op volledig scherm wordt weergegeven, vertel dit dan eenvoudigweg aan:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Om vervolgens het volledige scherm af te sluiten, geeft het document daarvoor een methode weer:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
Inhoud op volledig scherm wordt gecentreerd in de browserviewport. Het wordt aan de ontwikkelaar overgelaten om die inhoud op de meest geschikte manier vorm te geven om te bekijken. Normaal gesproken wilt u dat uw <div> het volledige schermruimte in beslag neemt. Goed nieuws is dat de API hiervoor nieuwe CSS-pseudo-selectors bevat:
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;
}
CSS-pseudo-selectors maken het heel eenvoudig om inhoud op volledig scherm op elke gewenste manier vorm te geven.
De Fullscreen API is standaard ingeschakeld in Chrome 15, FF 14, IE 11 en Opera 12.1. Zie de specificatie voor meer informatie over de rest van de API.
Bijgewerkt op 11-10-2012 : om in lijn te zijn met specificatiewijzigingen. De "S" in requestFullscreen() is in kleine letters weergegeven en document.webkitCancelFullScreen() gewijzigd in document.webkitExitFullscreen() . Bijgewerkte opmerking over browsercompatibiliteit.
Bijgewerkt op 11-02-2014 : om voorvoegsels voor IE toe te voegen, de standaard CSS-syntaxis toe te voegen en de opmerking over browsercompatibiliteit bij te werken. Bedankt @dstorey en @patrickkettner .