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

Si trabajas con sitios o apps que dependen del móvil -como me pasa a mí casi a diario- DeviceOrientationEvent es una de esas APIs que te salva la vida. Gracias al giroscopio y acelerómetro del dispositivo puedes saber cómo lo está sujetando el usuario y reaccionar en tiempo real: rotar elementos, mover objetos, cambiar el layout…

En mi caso, muchas veces necesito mostrar el contenido en un formato u otro según la orientación, así que esta API es perfecta para eso.

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.

Qué es DeviceOrientationEvent y para qué sirve

DeviceOrientationEvent es un evento de JavaScript que te permite leer la orientación física del dispositivo: inclinación, giro y rotación sobre los ejes X, Y y Z.

Cuando lo implementé por primera vez, lo que más me impresionó fue ver valores en tiempo real simplemente moviendo el teléfono.

Diferencia entre DeviceOrientation y DeviceMotion

• DeviceOrientationEvent → orientación del dispositivo (alpha, beta, gamma).
• DeviceMotionEvent → aceleración, fuerza de gravedad, velocidad angular.
• Con Orientation reaccionas a la pose del móvil; con Motion reaccionas al movimiento.

Explicación clara de los ejes: alpha, beta y gamma

• alpha (Z) → giro como una brújula (0°–360°).
• beta (X) → inclinar hacia adelante/atrás (–180° a 180°).
• gamma (Y) → inclinar de lado a lado (–90° a 90°).

Cuando usé esto por primera vez, descubrí que no siempre es intuitivo: cada eje controla un tipo de movimiento diferente, y eso influye en cómo transformas elementos.

Requisitos: HTTPS, sensores y compatibilidad

Para que funcione:

• Necesitas HTTPS obligatorio.
• En iOS, debes pedir permiso explícito para acceder al sensor.
• No todos los dispositivos incluyen giroscopio (mi primer Android viejo nunca funcionó).

Cómo detectar la orientación del dispositivo con JavaScript

Verificación de soporte del navegador

Siempre empiezo por esto, porque me he encontrado con dispositivos que simplemente no lo soportan.

if (!window.DeviceOrientationEvent) {
 alert("DeviceOrientation no está disponible en este navegador");
}

Añadiendo el event listener deviceorientation:

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

Leyendo los valores en tiempo real:

function handleOrientation(event) {
 const { alpha, beta, gamma } = event;
 console.log(alpha, beta, gamma);
}

Rotar elementos en la interfaz usando la orientación del móvil

Relación entre ejes y transformaciones CSS

• rotateX → relacionado con beta (X)
• rotateY → relacionado con alpha (Z)
• rotateZ → relacionado con gamma (Y)

Aunque parezca extraño, no siempre coincide como uno esperaría, y más de una vez he tenido que ajustar las rotaciones hasta que “se sentían bien”.

Ejemplo práctico: rotación de una imagen

function handleOrientation(event) {
 const { alpha, beta, gamma } = event;
 const img = document.querySelector("img");
 img.style.transform = `
   rotateX(${beta}deg)
   rotateY(${alpha}deg)
   rotateZ(${gamma}deg)
 `;
}

Bloqueo de ejes y control de la UI

Algo útil que implementé es poder bloquear ejes desde checkboxes. A veces no quieres que la UI gire en todas direcciones.

Solicitar permisos en iOS y navegadores modernos

En iOS, si no pides permiso, simplemente no funciona. Esto me pasó la primera vez y me tomó varios minutos entender por qué no llegaba ningún valor.

Cómo usar requestPermission()

async function requestAccess() {
 if (window.DeviceOrientationEvent?.requestPermission) {
   const perm = await window.DeviceOrientationEvent.requestPermission();
   if (perm !== "granted") {
     alert("Permiso denegado");
   }
 }
}

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

• 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 código, aquí se rotarán elementos u otra operación
}

Ejemplos: Usando DeviceOrientation

Veamos varios ejemplos para entender su funcionamiento.

Rotar imagen

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

Ver el valor de alpha, beta y gamma

Definimos un elemento HTML para cada una de los valores:

<img id="logo" src="logo.png" />

<h1>Alpha: <span id="alpha"></span></h1>
<h1>Beta: <span id="beta"></span></h1>
<h1>Gamma: <span id="gamma"></span></h1>

El CSS:

img {
  width: 150px;
  transition: transform 0.1s linear;
}

El script que se encarga de actualizar el HTML anterior con los valores de la posición de la pantalla:

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

function handleOrientation(event) {
  const { alpha, beta, gamma } = event;

  document.getElementById("alpha").textContent = alpha;
  document.getElementById("beta").textContent = beta;
  document.getElementById("gamma").textContent = gamma;

  const img = document.getElementById("logo");

  img.style.transform = `
    rotateX(${beta}deg)
    rotateY(${alpha}deg)
    rotateZ(${gamma}deg)
  `;
}

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) { ... }

Usos reales de DeviceOrientation en proyectos

• Adaptar el contenido según orientación
• Aquí es donde más lo uso:
  • dependiendo de cómo el usuario sostiene el dispositivo, muestro el contenido en un formato u otro.
  • Esto mejora muchísimo la sensación de “app nativa”.

Juegos, PWAs, AR y experiencias interactivas

• Controlar una bola en un laberinto.
• Hacer un medidor de inclinación.
• Simular una brújula.
• Ajustar elementos 3D.

Problemas frecuentes (y cómo los evito)

• Valores ruidosos → aplicar filtros o “suavizado”.
• Diferencias entre Android/iOS → normalización.
• Sensores desactivados → detectar y avisar al usuario.

Consideraciones adicionales y buenas prácticas

• Limitaciones del sensor
  • No todos los móviles reportan los tres ejes con precisión. En algunos solo obtendrás ruido.
• Suavizado y normalización
  • Un filtro pasa-bajos ayuda mucho:

  • let smoothBeta = 0;
    smoothBeta = smoothBeta * 0.8 + event.beta * 0.2;

• Alternativas útiles
  • ScreenOrientation API → solo orientación vertical/horizontal.
  • Gyroscope API y Accelerometer API → APIs del Sensor API más modernas.

Preguntas frecuentes

• ¿Por qué no funciona DeviceOrientation en mi móvil?
  • Puede faltar sensor, no estás en HTTPS, o no diste permisos (especialmente en iOS).
• ¿Puedo usar esto en escritorio?
  • En la mayoría de PCs no, porque no tienen giroscopio.
• ¿Consume mucha batería?
  • Escuchar eventos continuamente sí consume algo, especialmente en animaciones.

Conclusión

DeviceOrientation es una de las APIs más interesantes de JavaScript porque permite que nuestras webs reaccionen igual que una app nativa, lo cual es estupendo ya que, poco a poco se va rompiendo la brecha entre características de aplicaciones nativas y webs.

Usala para decidir el formato de la pantalla o mover elementos según la inclinación hace que la interfaz se sienta mucho más viva.

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

️ Alternativa: Rotación con CSS

También se puede simular el bloqueo de orientación rotando el contenido usando SOLO CSS, específicamente la regla @media y la propiedad transform: rotate().

El objetivo de este código es mantener el contenido en orientación portrait (vertical) incluso si el dispositivo se gira a landscape (horizontal):

• Si la orientación es portrait: El contenido se rota 90 grados para forzarlo a parecer horizontal.
• Si la orientación es landscape: El contenido se mantiene sin rotación (0 grados).

@media only screen and (orientation:portrait){
   #contenido {  
       /* Rota el contenido 90 grados si el dispositivo está en portrait */
       transform: rotate(90deg);
   }
}
@media only screen and (orientation:landscape){
   #contenido {  
       /* Mantiene el contenido sin rotación si el dispositivo está en landscape */
       transform: rotate(0deg);
   }
}