Introducción a la API de Orientación de Pantalla en JavaScript

- Andrés Cruz

In english
Introducción a la API de Orientación de Pantalla en JavaScript

Ver ejemplo

Cuando estamos utilizando un dispositivo móvil con Android y/o IOS (entre otros sistemas operativos móviles), nos daremos cuenta que al rotar el dispositivo la imagen proyectada en la pantalla "rota" o se adapta a la posición en la que se coloque el dispositivo; en otras palabras; la pantalla cambia su orientación ya que el sistema detecta que el ángulo de visión del dispositivo cambió ya sea en una posición horizontal (landscape) o vertical (portrait).

La API de Orientación de Pantalla en JavaScript se encuentra accesible nativamente a través del objeto Screen de JavaScript el cual proporciona las primitivas necesarias para detectar la posición del dispositivo, bloquear y desbloquear posiciones específicas; es decir, emplear las mismas características que tienen las aplicaciones en los sistemas operativos móviles pero tendremos todo esto en una aplicación web que con esto podemos adaptar de mejor manera al móvil mediante HTML.

En esta entrada veremos un introducción a esta API de Orientación de Pantalla en JavaScript que puede resultar esencial al momento de crear una aplicación web para que sea correctamente visualizada en los dispositivos móviles ya que con esto podemos detectar la orientación del dispositivo y actuar en consecuencia; también veremos un pequeño extra que permite mostrar cómo rotar el contenido HTML pero con CSS.

Propiedades y métodos y eventos de la API Screen

Cómo has podido observar a lo largo de esta entrada, la API de orientación de Pantalla extiende del objeto Screen y cuenta con un par de métodos que se complementan entre sí:

1.0 El método Screen.lockOrientation(): Para bloquear la pantalla

El método screen.lockOrientation() también accessible como window.screen.lockOrientation() permite bloquear (landscape y/o portrait) la pantalla dada una orientación en específico:

window.screen.lockOrientation(orientation);

El parámetro orientation representa una orientación en específico la cual puede ser:

  • portrait-primary Esta primera orientación de la pantalla se encuentra en modo portrait y es la posición "normal" o "por defecto" del dispositivo en donde los botones de acción se encuentran en el fondo.
  • portrait-secondary Esta otra orientación de la pantalla al igual que la orientación anterior se encuentra en modo portrait y es la posición "normal" o "por defecto" del dispositivo pero girado 180 grados en donde los botones de acción se encuentran arriba.
  • landscape-primary Esta otra orientación de la pantalla se encuentra en modo landscape y es la posición "normal" o "por defecto" del dispositivo pero girado 90 grados en sentido horario en donde los botones de acción se encuentran a la derecha.
  • landscape-secondary Por último esta orientación de la pantalla se encuentra en modo landscape y es la posición "normal" o "por defecto" del dispositivo pero girado 270 grados en sentido horario o 90 grados en sentido antihorario en donde los botones de acción se encuentran a la izquierda.

Entonces se emplea el parámetro orientation en el método window.screen.lockOrientation(orientation) a través de un String o array de String para bloquear la pantalla según las orientaciones dadas:

window.screen.lockOrientation('portrait'); window.screen.lockOrientation('portrait-primary', 'landscape-primary');

2.0 El método Screen.unlockOrientation(): Para desbloquear la pantalla

Si el primer método que tratamos bloqueaba la pantalla según la posición especificada, el método Screen.unlockOrientation() desbloquea o libera la pantalla según la orientación de pantalla especificado con el método anterior.

El evento onorientationchange

Por último, la API de Orientación de Pantalla también cuenta con un evento que indica cuando la pantalla ha sido rotada llamado onorientationchange, muy útil cuando ocurre una rotación del dispositivo y se deba actualizar la interfaz gráfica.

Caso práctico de la API de Orientación de Pantalla

El experimento presentado a continuación fué tomado de: Introducing the Screen Orientation API en donde también podrás encontrar información concerniente a la API de Orientación de Pantalla; a continuación procedemos a explicar algunas secciones de código del experimento:

Los prefijos

Al ser JavaScript nativo y no un framework como jQuery es necesario verificar el soporte a los navegadores a través de los prefijos, para esto se emplea la siguientes líneas de código:

            var prefix = 'orientation' in screen ? '' :
                    'mozOrientation' in screen ? 'moz' :
                    'webkitOrientation' in screen ? 'webkit' :
                    'msOrientation' in screen ? 'ms' :
                    NULL;

Puede darse el caso que simplemente el navegador no tenga soporte a la API de Orientación de Pantalla, en tal caso se mostrará un mensaje como "API no soportada".

Modo FullScreen

Para emplear la API de Orientación de Pantalla en JavaScript es necesario que la página ocupe la pantalla completa -full screen- por ello se activa y desactiva el modo de pantalla completa cada vez que se cambie la orientación del dispositivo seleccionada a través de las siguientes funciones respectivamente:

                function launchFullscreen(element) {
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    }...
                }

                // desactiva el FullScreen
                function exitFullscreen() {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    }...
                }

Activar el método LockOrientation y unlockOrientation

Si la API se encuentra disponible, cada vez que se presione uno de los botones del ejemplo se des/bloqueará la pantalla según el modo seleccionado:

                // bloquea la pantalla y activa el FullScreen
                document.getElementById('lock-button').addEventListener('click', function(event) {
                    event.preventDefault();
                    launchFullscreen(document.documentElement);

                    setTimeout(function() {
                        screen[prefix + (prefix === '' ? 'l' : 'L') + 'ockOrientation'](select.value);
                    }, 1);
                });

                // desbloquea la pantalla y desactiva el FullScreen
                document.getElementById('unlock-button').addEventListener('click', function() {
                    exitFullscreen();
                    screen[prefix + (prefix === '' ? 'u' : 'U') + 'nlockOrientation']();
                });

El evento el método LockOrientation y unlockOrientation

Sencillamente se vincula una función al evento onorientationchange que recordemos se activa cada que que se rota el dispositivo:

                function orientationHandler() {
                    var orientationProperty = prefix + (prefix === '' ? 'o' : 'O') + 'rientation';
                    document.getElementById('orientation').textContent = screen[orientationProperty];
                }

                // activa el evento manejador
                screen.addEventListener(prefix + 'orientationchange', orientationHandler);

Ver ejemplo

Bloquear landscape/portrait con CCS

Vamos a ver un pequeño plus o extra en el cual mostramos como podemos rotar el contenido HTML de una web pero esta vez empleando CSS para hacerlo todo todavía más sencillo; para ello presentamos el siguiente código que permite bloquear la web en landscape y que se mantenga como portrait:

#contenido { display:block; }

@media only screen and (orientation:portrait){
    #contenido {  
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);

    }
}

@media only screen and (orientation:landscape){

    #contenido {  
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.