DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
19-03-2015

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.

La API de Orientación de Pantalla en JavaScript se encuentra accesible nativamente a través del objeto Screen 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 en una aplicación web móvil.

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.

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()

El método screen.lockOrientation() también accesible como window.screen.lockOrientation() permite bloquear 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:

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()

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);

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Hover over the cards

Hover over the cards

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Algunos artículos que te pueden interesar

Cómo habilitar el Instant Payment Notification (IPN) en PayPal

Cómo habilitar el Instant Payment Notification (IPN) en PayPal

Se explica cómo configurar el Instant Payment Notification (IPN) desde nuestro perfil de desarrollo en PayPal.

Andrés Cruz 23-09-2016

Configurando un dispositivo Android para desarrollar

Configurando un dispositivo Android para desarrollar

Explicaremos como configurar un dispositivo Android para que al conectarlo en una computadora vía USB, el dispositivo Android pueda ser utilizado para "correr" o instalar nuestras aplicaciones en desarrollo.

Andrés Cruz 24-12-2013

Dibujando puntos al azar con Canvas

Dibujando puntos al azar con Canvas

En este artículo dibujaremos un montón de esferas cuyas posiciones son al azar a través de un Canvas.

Andrés Cruz 11-04-2014