Detectando la orientación del dispositivo con el API de javaScript

- Andrés Cruz

In english

Detectando la orientación del dispositivo con el API de javaScript

Con esta API podemos obtener información sobre la orientación de un dispositivo como teléfono y/o tablet, en específico, esta API nos provee un evento con la cual reportamos data que indica la orientación del dispositivo o celular; podemos usar esta información para rotar elementos en nuestra web; veamos.

El evento addEventListener()

Primero lo primero; es necesario definir el evento que detectará la orientación del dispositivo (deviceorientation):

window.addEventListener("deviceorientation", handleOrientation, true);

Los parámetros son los siguientes:

  • El nombre del evento que se desee "escuchar"; en este caso deviceorientation.
  • El nombre del manejador del evento; es decir, aquella función que recibirá la data periódicamente acerca de la orientación del dispositivo.
  • Booleano que indica si deseamos (true) o no (false) capturar el evento.

Obteniendo la data según la orientación del dispositivo

El siguiente paso (luego de registrado el manejador llamado handleOrientation()) consiste en desarrollar el handleOrientation(); el que obtendrá periódicamente data acerca de la orientación del dispositivo:

  • DeviceOrientationEvent.alpha: Este valor representa la rotación alrededor del eje Z dado en grados en un rango de 0 a 360.

Rotación en el eje Z

logo html5
  • DeviceOrientationEvent.beta: Este valor representa la rotación alrededor del eje X dado en grados en un rango de -180 a 180; rotando el dispositivo de arriba hacia abajo como vemos en la siguiente figura.

Rotación en el eje X

  • DeviceOrientationEvent.gamma: Este valor representa la rotación alrededor del eje Y dado en grados en un rango de -90 a 90; moviendo el dispositivo de derecha a izquierda (de lado a lado). 

     

Rotación en el eje Y



  •  

El objeto event nos provee de esta data; es decir; de los grados de rotación gamma, beta y alpha.

function handleOrientation(event) {  var absolute = event.absolute;  var alpha    = event.alpha;  var beta     = event.beta;  var gamma    = event.gamma;  // resto del codigo, aqui se rotaran elementos u otra operacion }

Ejemplo: Usando el evento DeviceOrientation

Veamos un pequeño ejemplo en donde se rotará una imagen y visualizará la información acerca de la orientación del dispositivo.

Consideraciones generales

  • rotateZ: Para simular la rotación en el eje de las Y (con rotate obtendrendríamos el mismo resultado).
  • rotateX: Para simular la rotación el en eje de las X.
  • rotateY: Para simular la rotación el en eje de las Z.

1. Verificar la compatibilidad

Verificamos la compatibilidad con el navegador.

if (!window.DeviceOrientationEvent)
	alert("Device Orientation no soportadas por tu navegador");

2. Escuchar el evento Device Orientation

window.addEventListener("deviceorientation", handleOrientation, true);

3. Obtener los elementos del DOM

  • Obtenemos la data.
  • Obtenemos la imagen a rotar según la posición del dispositivo.
  • Obtenemos los encabezados donde se colocaran los grados.
  • Por último los checkbox que permite bloquear los ejes X, Y y Z.
	var beta = event.beta; //X
	var gamma = event.gamma;//Y
	var alpha = event.alpha; //Z

	var img = document.querySelector('img');
	
	var alphaTag = document.getElementById('alpha');
	var betaTag = document.getElementById('beta');
	var gammaTag = document.getElementById('gamma');
	
	var blockAlpha = document.getElementById('blockAlpha');
	var blockBeta = document.getElementById('blockBeta');
	var blockGamma = document.getElementById('blockGamma');

4. Rotar la imagen

Finalmente aplicamos la rotación a la imagen.

		// rotamos
		if (!blockBeta.checked) {
			img.style.webkitTransform = "rotateX(" + beta + "deg)";
			betaTag.innerHTML = beta;
		}
		if (!blockGamma.checked) {
			img.style.webkitTransform = "rotateZ(" + gamma + "deg)";
			gammaTag.innerHTML = gamma;
		}
		if (!blockAlpha.checked) {
			img.style.webkitTransform = "rotateY(" + alpha + "deg)";
			alphaTag.innerHTML = alpha;
		}

5. HTML

El HTML del ejemplo:

<img src="/public/images/example/html/html5-logo.png"/>
<h1>Alpha: <span id="alpha"></span> <input id="blockAlpha" type="checkbox" /></h1>
<h1>Beta: <span id="beta"></span> <input id="blockBeta" type="checkbox" /></h1>
<h1>Gamma: <span id="gamma"></span> <input id="blockGamma" type="checkbox" /></h1>

Ejemplo completo

Puedes probar el ejemplo completo dando click aquí (recuerda probar el ejemplo desde un móvil, tableta o cualquier otro dispositivo con giroscopio).

Detectando la orientación de la pantalla con CSS

También podemos detectar si la orientación es vertical u horizontal con CSS; para eso empleamos los media queries provistos a partir de CSS3:

@media all and (orientation: portrait) { ... }
@media all and (orientation: landscape) { ... }

Fuentes

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.

!Cursos desde!

10$

En Udemy

Quedan 2d 18:04!


Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!