Fullscreen API no trata de mostrar una página web a pantalla completa, sino de mostrar un elemento/s de una página en pantalla completa :). El efecto que se consigue con esta API es dar mayor énfasis a los elementos que solicitaron este modo. A día de hoy la especificación está implementada en Chrome, Opera, Safari y Firefox, quedando fuera Internet Explorer.

Demo

Para comprobar el efecto sobre un elemento, he insertado la siguiente imagen:

Si hacemos doble clic sobre la misma conseguiremos entrar en modo pantalla completa. De hecho, podemos observar incluso un borde coloreado alrededor de la imagen. Veamos cómo conseguirlo 😀

Compatibilidad entre navegadores

Lo primero con lo que tenemos que lidiar es con los prefijos utilizados por cada uno de los navegadores en esta fase temprana de la API. A día de hoy la especificación cita los siguientes miembros:

element requestFullscreen

Muestra el elemento que lo invoca (y sus hijos) en pantalla completa.

document.fullscreenEnabled

Devuelve true si la página tiene la habilidad de mostrar elementos en pantalla completa.

document.fullscreenElement

Devuelve el elemento que está mostrado en pantalla completa. Si en ese momento no hubiera ninguno mostrándose en este modo se devolvería null.

document.exitFullscreen

Detiene el modo pantalla completa

Chrome y Firefox han prefijado estos miembros, por lo que es necesario tenerlos en cuenta antes de lanzar cualquier petición a la API:

        var fullScreenChangeEvent = "fullscreenchange";
        if (container.webkitRequestFullscreen) {
            console.log("webkit");
            fullScreenChangeEvent = "webkitfullscreenchange";
            container.requestFullscreen = container.webkitRequestFullscreen;
            document.fullscreenEnabled = document.webkitFullscreenEnabled;
            document.exitFullscreen = document.webkitCancelFullScreen;
        }
        else if (container.mozRequestFullScreen) {
            console.log("moz");
            fullScreenChangeEvent = "mozfullscreenchange";
            container.requestFullscreen = container.mozRequestFullScreen;
            document.fullscreenEnabled = document.mozFullScreenEnabled;
            document.exitFullscreen = document.mozCancelFullScreen;
        }

Por el contrario, Opera sigue el estándar por lo que no será necesario ninguna medida adicional. Internet Explorer por el momento no da soporte a esta característica.

Implementación

Una vez que hemos lidiado con las compatibilidades de los distintos navegadores, la implementación es bastante sencilla:

        if (document.fullscreenEnabled) {
            document.addEventListener(fullScreenChangeEvent, function (e) {
                console.log("fullscreenchange event! ", e);
                if (e.type === "webkitfullscreenchange")
                    console.log("document.webkitFullscreenElement:" + document.webkitFullscreenElement);
                else if (e.type === "mozfullscreenchange")
                    console.log("document.mozFullScreenElement:" + document.mozFullScreenElement);
                else
                    console.log("document.fullscreenElement:" + document.fullscreenElement);
            });
            document.addEventListener("keydown", function (e) {
                if (e.keyCode == 69) { //e
                    document.exitFullscreen();
                }
            });
            container.requestFullscreen();
        }

Para cerciorarnos de que podemos invocar la pantalla completa de un elemento hacemos uso de document.fullscreenEnabled. Si queremos realizar ciertas acciones cuando el evento fullscreenchange es lanzado basta con añadir un handler a nivel de document (se lanza tanto cuando pasamos a pantalla completa como cuando salimos de ella). En este caso se muestra el valor de document.fullscreenElement. Como veis, en este caso he tenido que discernir qué tipo de evento se lanzó para saber de dónde leer esa información. El motivo de hacerlo aquí y no en el apartado anterior es que los elementos document.webkitFullscreenElement y document.mozFullScreenElement no son funciones sino simples propiedades que se actualizan cuando el evento fullscreenchange se lanza, por lo que no puedo recoger esta información antes de que el evento ocurra. Por último, he agregado un handler al evento keydown, para capturar en el momento que el usuario/lector 🙂 pulsa la tecla e, para salir del modo pantalla completa utilizando document.exitFullscreen

Estilos CSS

Por último, comentar que existen pseudo-clases para controlar los estilos del elemento en pantalla completa. Sería necesario contemplar los siguientes:

        #stickercontainer {
            padding: 15px;
        }
            #stickercontainer:full-screen { /*html*/
                background-color: pink;
            }
            #stickercontainer:-webkit-full-screen { /*webkit*/
                background-color: blue;
            }
            #stickercontainer:-moz-full-screen { /*mozilla*/
                background-color: green;
            }
        @media screen and (view-mode: fullscreen) { /*opera*/
            #stickercontainer {
                background-color: yellow;
            }
        }

En el caso de Opera es necesario hacer uso de media query, indicando el view-mode fullscreen.

Espero que sea de utilidad 😀

¡Saludos!