In bundle con HTML5 è venuto un gran numero di qualità API e una delle migliori è stata l'API Fullscreen che fornisce un modo nativo per il browser di fare ciò che era possibile solo in flash per un lungo periodo: visualizzare la pagina Web in modalità schermo intero per l'utente.
Ciò è utile se stai visualizzando video o immagini o se stai sviluppando un gioco. In effetti, qualsiasi contenuto su cui concentrarsi può trarre vantaggio dall'API Fullscreen.
E soprattutto, l'API Fullscreen è davvero facile da usare ...
Un numero di metodi fa parte dell'API Fullscreen:
element.requestFullScreen()Questo metodo consente a un singolo elemento di andare a schermo intero.
Document.getElementById(“myCanvas”).requestFullScreen()Questo farà sì che la tela con l'ID 'myCanvas' vada a schermo intero.
document.cancelFullScreen()Questo semplicemente esce dalla modalità a schermo intero e ritorna alla vista del documento.
Document.fullScreenQuesto restituirà true se l'utente è in modalità a schermo intero.
document.fullScreenElementRestituisce l'elemento che è attualmente in modalità a schermo intero.
Nota che questi sono i metodi standard, ma per il momento ti serviranno i prefissi dei fornitori per farlo funzionare in Chrome, Firefox e Safari (Internet Explorer e Opera al momento non supportano questa API).
Poiché prima dobbiamo scoprire quale metodo riconosce il browser, creeremo una funzione che troverà il metodo giusto per il browser e la chiamerà:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Come puoi vedere tutta questa funzione è vedere se qualcuno dei metodi requestFullScreen restituisce true e quindi chiama la funzione per il browser corretto usando il suo prefisso del venditore.
Dopotutto, tutto ciò che dobbiamo fare è chiamare la funzione fullScreen in questo modo:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Questo invierà un messaggio all'utente che richiede il permesso di andare a schermo intero, se è accettato tutte le barre degli strumenti nel browser spariranno e l'unica cosa sullo schermo sarà la pagina web desiderata o il singolo elemento.
Questo metodo richiede anche i prefissi dei fornitori, quindi utilizzeremo la stessa idea di cui sopra e creeremo una funzione che determinerà il prefisso che dovremmo utilizzare in base al browser dell'utente.
Una cosa che noterete è che questo metodo non ha bisogno di alcun elemento passato perché a differenza del metodo requestFullScreen si applica sempre all'intero documento.
// the helper functionfunction fullScreenCancel() {if(document.requestFullScreen) {document.requestFullScreen();} else if(document .webkitRequestFullScreen ) {document.webkitRequestFullScreen();} else if(document .mozRequestFullScreen) {document.mozRequestFullScreen();}}//cancel full-screenfullScreenCancel();In bundle con questa API JavaScript è arrivata una pseudo-classe CSS chiamata: a schermo intero e questa può essere utilizzata per modellare qualsiasi elemento nella pagina Web quando è in modalità a schermo intero, questo può tornare utile perché le dimensioni del browser aumentano leggermente quando in modalità schermo intero.
/* Changing something in the body */:-webkit-full-screen {font-size: 16px;}:-moz-full-screen {font-size: 16px;}/*Only one element*/:-webkit-full-screen img {width: 100%;height: 100%;}:-moz-full-screen img {width: 100%;height: 100%;}Tieni presente che non puoi separare i prefissi del venditore con virgole perché il browser non li leggerà:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Affinché gli stili siano applicati correttamente, è necessario inserire ogni prefisso del fornitore nel proprio blocco.
Questa API JavaScript è una delle meno conosciute fornite con HTML5, ma secondo me è sia efficace che semplice da implementare. L'esperienza utente migliorata di concentrarsi su un singolo elemento, in particolare per video, immagini e giochi vale le poche righe di codice coinvolte.
Hai implementato l'API Fullscreen ovunque? A quali usi puoi pensare? Fateci sapere nei commenti.
Immagine in primo piano / miniatura, immagine di messa a fuoco via Shutterstock.