Incluido en HTML5, apareció una gran cantidad de bondades API y una de las mejores fue la API de pantalla completa que proporciona al navegador una forma nativa de hacer lo que solo era posible en flash durante mucho tiempo: mostrar la página web en modo pantalla completa para el usuario.
Esto es útil si está mostrando videos o imágenes, o si está desarrollando un juego. De hecho, cualquier contenido que deba enfocarse puede beneficiarse de la API de pantalla completa.
Y lo mejor de todo, la API de pantalla completa es realmente fácil de usar ...
Una cantidad de métodos forman parte de la API de pantalla completa:
element.requestFullScreen()Este método permite que un solo elemento pase a pantalla completa.
Document.getElementById(“myCanvas”).requestFullScreen()Esto hará que el lienzo con la ID 'myCanvas' se muestre en pantalla completa.
document.cancelFullScreen()Esto simplemente sale del modo de pantalla completa y regresa a la vista del documento.
Document.fullScreenEsto volverá verdadero si el usuario está en modo de pantalla completa.
document.fullScreenElementDevuelve el elemento que está actualmente en modo de pantalla completa.
Tenga en cuenta que estos son los métodos estándar, pero por el momento necesitará los prefijos del proveedor para hacer que esto funcione en Chrome, Firefox y Safari (Internet Explorer y Opera no son compatibles con esta API en este momento).
Ya que primero tenemos que averiguar qué método reconoce el navegador crearemos una función que encontrará el método correcto para el navegador y lo llamará:
//helper functionfunction fullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.webkitRequestFullScreen ) {element.webkitRequestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();}}Como puede ver, todo lo que hace esta función es ver si alguno de los métodos requestFullScreen devuelve verdadero y luego llama a la función para el navegador correcto usando su prefijo de proveedor.
Después de esto, todo lo que tenemos que hacer es llamar a la función de pantalla completa así:
//for the whole pagevar html = document.documentElement;fullScreen(html); // For a specific element on the pagevar canvas = document.getElementById('mycanvas');fullScreen(canvas);Esto enviará un aviso al usuario solicitando permiso para ir a pantalla completa, si se acepta, todas las barras de herramientas en el navegador desaparecerán y lo único en la pantalla será la página web deseada o el elemento individual.
Este método también requiere prefijos de proveedor, por lo que utilizaremos la misma idea que la anterior y crearemos una función que determinará qué prefijo deberíamos usar según el navegador del usuario.
Una cosa que notará es que este método no necesita pasar ningún elemento porque, a diferencia del método requestFullScreen, siempre se aplica a todo el 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();Junto con esta API de JavaScript apareció una pseudoclase de CSS llamada: pantalla completa y esto se puede usar para aplicar estilo a cualquier elemento de la página web cuando está en modo de pantalla completa, esto puede ser útil porque el tamaño del navegador aumenta un poco cuando está modo de pantalla completa.
/* 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%;}Tenga en cuenta que no puede separar los prefijos del vendedor con comas porque el navegador no los leerá:
/* This will not work */:-webkit-full-screen img,:-moz-full-screen img {width: 100%;height: 100%;}Para que los estilos se apliquen correctamente, debe colocar cada prefijo de proveedor en su propio bloque.
Esta API de JavaScript es una de las menos conocidas que se envía con HTML5 pero, en mi opinión, es tanto efectiva como simple de implementar. La experiencia mejorada del usuario al centrarse en un solo elemento, especialmente para video, imágenes y juegos, bien vale las pocas líneas de código involucradas.
¿Has implementado la API de pantalla completa en cualquier lugar? ¿Qué usos se te ocurren? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen de enfoque a través de Shutterstock.