Deja que tu contenido hable: API de pantalla completa

Ahora, la mayoría de los navegadores tienen la capacidad de ingresar a un modo de pantalla completa o kiosco por un tiempo. Básicamente, la IU de Chrome del navegador no estorba y el contenido toma el control. En el caso de las apps instaladas desde Chrome Web Store, incluso los usuarios 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 funciona bien. La pantalla completa programática es mejor.

La API de pantalla completa permite que las aplicaciones web indiquen de manera programática 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 con WebGL y <canvas> finalmente pueden volverse completamente envolventes, los videos pueden parecer una pantalla mágica y las revistas en línea pueden parecerse a la realidad. Me encanta el navegador, pero no deberíamos limitarnos :)

Si quieres omitir los detalles, consulta esta demostración:

Captura de pantalla de la demostración en pantalla completa

Entonces, ¿cómo funciona la API? Si quieres una <div>, por ejemplo, para entrar en pantalla completa, solo di 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 el modo de pantalla completa se centra en el viewport del navegador. El desarrollador es quien define el estilo de ese contenido de la manera más adecuada para su 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 seudoselectores 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 el diseño del contenido en pantalla completa de la manera que desees.

La API de pantalla completa 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 las especificaciones.

Actualización del 11/10/2012: Para estar alineado con los cambios de especificaciones Se redujo la "S" de requestFullscreen() y se cambió document.webkitCancelFullScreen() por document.webkitExitFullscreen(). Se actualizó el comentario sobre la compatibilidad del navegador.

Actualización del 11 de febrero de 2014: Para incluir prefijos para IE, agregar la sintaxis de CSS estándar y actualizar el comentario de compatibilidad del navegador. Gracias, @dstorey y @patrickkettner.