La maggior parte dei browser è in grado di attivare la modalità a schermo intero o chiosco da un po' di tempo. In sostanza, l'interfaccia utente del browser Chrome non è più visibile e i contenuti prendono il sopravvento. Per le app installate dal Chrome Web Store, gli utenti hanno anche potuto configurare manualmente un'app in modo che venga eseguita a schermo intero quando viene aperta dalla pagina Nuova scheda. Lo schermo intero manuale è buono. Lo schermo intero programmatico è migliore.
L'API Fullscreen consente alle app web di indicare in modo programmatico a qualsiasi contenuto della pagina di attivare la modalità di visualizzazione a schermo intero del browser, da JavaScript. Ciò significa che i giochi WebGL e <canvas> possono finalmente diventare completamente immersivi, i video possono sembrare come quelli sul grande schermo e le riviste online possono sembrare reali. Adoro il browser, ma non dobbiamo farci limitare :)
Se vuoi saltare i dettagli, ecco una demo:
Come funziona l'API? Se vuoi che un <div>, ad esempio, entri in modalità schermo intero, di' semplicemente:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Per uscire dalla modalità a schermo intero, document espone un metodo apposito:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
I contenuti in modalità a schermo intero sono centrati nell'area visibile del browser. Spetta allo sviluppatore impostare lo stile dei contenuti nel modo più appropriato per la visualizzazione. In genere, è preferibile che <div> occupi l'intero spazio sullo schermo. La buona notizia è che l'API include nuovi pseudo-selettori CSS per questo:
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;
}
Gli pseudo-selettori CSS ti consentono di applicare facilmente stili ai contenuti a schermo intero come preferisci.
L'API Fullscreen è abilitata per impostazione predefinita in Chrome 15, FF 14, IE 11 e Opera 12.1. Per ulteriori informazioni sul resto dell'API, consulta la specifica.
Aggiornato il 11/10/2012: per essere in linea con le modifiche alle specifiche. La "S" in requestFullscreen() è stata scritta in minuscolo e document.webkitCancelFullScreen() è stata modificata in document.webkitExitFullscreen(). Commento sulla compatibilità del browser aggiornato.
Aggiornamento del 11/02/2014: per includere i prefissi per IE, aggiungere la sintassi CSS standard e aggiornare il commento sulla compatibilità del browser. Grazie a @dstorey e @patrickkettner.