La maggior parte dei browser ha la possibilità di passare per un po' di tempo in modalità a schermo intero o kiosk. In sostanza, l'interfaccia utente Chrome del browser ostacola e i contenuti prendono il controllo. Per le app installate dal Chrome Web Store, gli utenti hanno persino la possibilità di configurare manualmente un'app in modo che venga eseguita a schermo intero quando viene aperta dalla pagina Nuova scheda. La modalità a schermo intero manuale è corretta. La pubblicità programmatica a schermo intero è meglio.
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 uno schermo d'argento e le riviste online possono sembrare un vero affare. Adoro il browser, ma non dovrebbe essere vincolato :)
Se vuoi saltare i dettagli, ecco una demo:
Come funziona l'API? Se, ad esempio, vuoi che <div> venga visualizzato a schermo intero, puoi dirgli di:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Quindi, per uscire dalla modalità a schermo intero, document mostra un metodo apposito:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
I contenuti in modalità a schermo intero sono centrati nell'area visibile dei browser. Lo sviluppatore spetta allo sviluppatore definire lo stile dei contenuti nel modo più appropriato per la visualizzazione. In genere, è consigliabile che <div> occupi tutto lo 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 consentono di assegnare uno stile ai contenuti a schermo intero come preferisci.
L'API Fullscreen è attivata per impostazione predefinita in Chrome 15, FF 14, IE 11 e Opera 12.1. Per ulteriori informazioni sul resto dell'API, consulta le specifiche.
Ultimo aggiornamento: 11/10/2012: per essere in linea con le modifiche alle specifiche. "S" in minuscolo in requestFullscreen() e modificata document.webkitCancelFullScreen() in document.webkitExitFullscreen(). Commento sulla compatibilità del browser aggiornato.
Ultimo aggiornamento: 11/02/2014: per includere prefissi per IE, aggiungere la sintassi CSS standard e aggiornare il commento sulla compatibilità del browser. Grazie a @dstorey e @patrickkettner.