La mayoría de los navegadores tienen la capacidad de ingresar al modo de pantalla completa o de kiosco desde hace tiempo. Básicamente, la IU de Chrome del navegador se quita del camino y el contenido toma el control. En el caso de las apps instaladas desde Chrome Web Store, los usuarios incluso pueden configurar manualmente una app para que se ejecute en pantalla completa cuando se abre desde la página Nueva pestaña. La pantalla completa manual es buena. La pantalla completa programática es mejor.
La API de Fullscreen permite que las apps web le indiquen de forma programática a cualquier contenido de la página que ingrese al modo de visualización de pantalla completa del navegador desde JavaScript. Esto significa que los juegos de WebGL y <canvas> pueden ser totalmente envolventes, los videos pueden parecerse a la pantalla grande y las revistas en línea pueden parecer reales. Me encanta el navegador, pero no debemos limitarnos a él :)
Si quieres omitir los detalles, aquí tienes una demostración:
Entonces, ¿cómo funciona la API? Si quieres que un <div>, por ejemplo, entre en pantalla completa, simplemente dile lo siguiente:
div.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
div.mozRequestFullScreen();
div.msRequestFullscreen();
div.requestFullscreen(); // standard
Luego, para salir de la pantalla completa, document expone un método para eso:
document.webkitExitFullscreen();
document.mozCancelFullScreen();
document.msExitFullscreen();
document.exitFullscreen();
El contenido en modo de pantalla completa se centra en el viewport del navegador. El desarrollador es quien debe aplicarle diseño a ese contenido de la forma más apropiada para la visualización. Por lo general, querrás que tu <div> ocupe todo el espacio de la pantalla. La buena noticia es que la API incluye nuevos pseudoselectores de CSS para esto:
div:-webkit-full-screen {
width: 100% !important;
}
div:-moz-full-screen {
width: 100% !important;
}
div:-ms-fullscreen {
width: 100% !important;
}
div:fullscreen {
width: 100% !important;
}
/* While in fullscreen, hide any children with class 'tohide' */
:-webkit-full-screen .tohide {
display: none;
}
:-moz-full-screen .tohide {
display: none;
}
:-ms-fullscreen .tohide {
display: none;
}
:fullscreen .tohide {
display: none;
}
Los pseudoselectores de CSS facilitan mucho la aplicación de diseño al contenido de pantalla completa de la forma que desees.
La API de Fullscreen está habilitada de forma predeterminada en Chrome 15, FF 14, IE 11 y Opera 12.1. Para obtener más información sobre el resto de la API, consulta la especificación.
Actualización del 11/10/2012: Se actualizó para que esté en línea con los cambios en las especificaciones. Se cambió la "S" de requestFullscreen() a minúscula y se cambió document.webkitCancelFullScreen() a document.webkitExitFullscreen(). Se actualizó el comentario sobre la compatibilidad del navegador.
Actualización: 11/02/2014: Se incluyeron prefijos para IE, se agregó la sintaxis estándar de CSS y se actualizó el comentario de compatibilidad del navegador. Gracias, @dstorey y @patrickkettner.