Método requestFullscreen() de la API Fullscreen

Definición y uso

requestFullscreen() El método abre el elemento en modo pantalla completa.

Consejo:Utilice Método exitFullscreen()Cancelar el modo pantalla completa.

Ejemplo

Ejemplo 1

Mostrar el elemento <video> en modo pantalla completa:

/* Obtener el elemento que se mostrará en modo pantalla completa (en este ejemplo, el video): */
var elem = document.getElementById("myvideo");
/* Al ejecutar la función openFullscreen(), abre el video en pantalla completa. */
Tenga en cuenta que debemos incluir los prefijos de diferentes navegadores, ya que aún no admiten la propiedad requestFullscreen */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

Prueba personalmente

Ejemplo 2

Para abrir una página HTML en pantalla completa, utilice document.documentElement en lugar de document.getElementById("element").En este ejemplo, también utilizamos una función de cierre para cerrar la pantalla completa:

/* Obtener documentElement (<html>) para mostrar la página en pantalla completa */
var elem = document.documentElement;
/* Ver en pantalla completa */
function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
/* Cerrar pantalla completa */
function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

Prueba personalmente

Ejemplo 3

Cuando la página está en modo de pantalla completa, también puede usar CSS para configurar el estilo de la página:

/* Sintaxis de Safari */
:-webkit-full-screen {
  background-color: yellow;
}
/* Sintaxis de IE11 */
:-ms-fullscreen {
  background-color: yellow;
}
/* Sintaxis estándar */
:fullscreen {
  background-color: yellow;
}

Prueba personalmente

Sintaxis

HTMLElementObject.requestFullscreen()

Parámetros

Sin.

Detalles técnicos

Valor de retorno: Sin valor de retorno.

Compatibilidad del navegador

Los números en la tabla indican la versión del primer navegador que admite completamente este método.

Notas:Algunos navegadores requieren prefijos específicos (ver entre paréntesis):

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
71.0
15.0 (webkit)		 79.0
11.0 (ms)		 64.0
9.0 (moz)		 6.0 (webkit) 58.0
15.0 (webkit)