Come ottenere la modalità a schermo intero

Impara come creare una finestra a schermo intero utilizzando JavaScript.

Finestra a schermo intero

Come visualizzare un elemento in modalità a schermo intero utilizzando JavaScript.

Clicca sul pulsante per aprire il video in modalità a schermo intero:

Prova tu stesso

Video a schermo intero

Per aprire un elemento in modalità a schermo intero, utilizziamo element.requestFullscreen() Metodo:

Esempio

<script>
/* Ottenere l'elemento da visualizzare in modalità a schermo intero (nel nostro esempio è un video): */
var elem = document.getElementById("myvideo");
/* Quando si esegue la funzione openFullscreen(), aprire il video in modalità a schermo intero.
Attenzione, dobbiamo includere prefissi diversi per diversi browser perché non supportano ancora il metodo requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Prova tu stesso

Documento a schermo intero

Per aprire l'intera pagina in modalità a schermo intero, utilizzare: document.documentElement invece di document.getElementById("element").

In questo esempio, utilizziamo anche una funzione di chiusura per uscire dalla modalità a schermo intero:

Esempio

<script>
/* Ottieni documentElement (<html>) per visualizzare la pagina a schermo intero */
var elem = document.documentElement;
/* Visualizzazione a schermo intero */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Uscita da schermo intero */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}
</script>

Quando la pagina è in modalità a schermo intero, puoi anche utilizzare CSS per impostare lo stile della pagina:

Esempio

/* Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Sintassi standard */
:fullscreen {
  background-color: yellow;
}

Prova tu stesso

Pagine correlate

Manuale di riferimento HTML DOM:Metodo requestFullscreen()

Manuale di riferimento HTML DOM:Metodo exitFullscreen()

Manuale di riferimento HTML DOM:Metodo documentElement