Grazie alla fullscreen API di HTML5 è possibile offrire una user experience di tipo "immersive" anche nelle web application.

In particolari applicazioni, potrebbe essere necessario occupare tutto lo spazio disponibile sullo schermo, rimuovendo i bordi della finestra del browser, privilegiando il contenuto (come ad esempio un magazine o un video) e riadattandolo ad una modalità più idonea alla visualizzazione, magari nascondendo alcuni elementi del documento in favore di altri.

Per richiedere il passaggio alla modalità fullscreen del browser, è sufficiente richiamare il metodo requestFullscreen come di seguito illustrato:

$("#btnFull").bind('click', function(){

  var docElm = document.documentElement;
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
  }
  else if (docElm.mozRequestFullScreen) {
    
    docElm.mozRequestFullScreen();
  }
  else if (docElm.webkitRequestFullScreen) {
      
  docElm.webkitRequestFullScreen();
      
  }
  
});

A questo punto Il browser, per facilitare all'utente il ritorno alla modalità standard, visualizzerà delle istruzioni (personalizzate per vendor). Per convenzione la pressione del tasto Esc dovrebbe forzare il ritorno alla modalità standard, tuttavia è possibile farlo anche programmaticamente da un controllo ad-hoc richiamando il metodo exitFullscreen.

L'API prevede anche la possibilità di sottoscrivere l'evento sollevato durante la commutazione dalla modalità standard a fullscreen e viceversa:

document.addEventListener("fullscreenchange", function () {
    $("#navigation).toggle(!document.fullscreen);
}, false);

Infine è possibile applicare stili differenti agli elementi della pagina, a seconda della modalità di visualizzazione impostata, semplicemente ricorrendo ad una pseudo-classe CSS come di seguito illustrato:

html:fullscreen {
    background: black;
}

La specifica completa è disponibile qui: http://www.w3.org/TR/fullscreen/