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:portrait-primaryEsta 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-secondaryEsta 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-primaryEsta 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-secondaryPor ú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()
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);
Comentarios
Publicar un comentario