Filosofía responsive: cómo detectar un cambio de orientación de la pantalla

Filosofía responsive: cómo detectar un cambio de orientación de la pantalla

orientation change screenPuede que el mutable mundo de la programación web no sea tan glamuroso como el  extravagante mundo de la moda. Pero al igual que en éste, también existen tendencias. Y la tendencia desde hace algún tiempo es la filosofía de diseño “responsive, es decir, un diseño compatible, fluido y adaptable con toda clase de navegadores, pantallas y dispositivos. ¿Cómo se logra esto?

La respuesta a esta pregunta daría para al menos otro artículo. La cuestión es que existen algunos frameworks como el famoso Bootstrap de Twitter que facilitan muchísimo esta tarea.

No empero, existen casos en los que estos diseños “responsivos” o sensibles no son suficientes para cubrir todas las necesidades de visualización en dispositivos móviles.

Detectando la rotación de la pantalla

Por ejemplo, ¿qué ocurre si volteamos la pantalla de nuestra tablet o móvil? Normalmente, se producirá un “cambio de orientación“. Si hemos sido muy meticulosos con nuestro diseño, puede que hayamos previsto esta eventualidad en nuestro CSS (si os interesa, en otra ocasión os contaremos cómo). El propio navegador se ocupa de recargar los atributos CSS necesarios para esta nueva disposición.

Pero si no es así, aún nos quedan dos opciones. Antes de verlas, señalar que tenemos dos orientaciones básicas: vertical o retrato (portrait), y horizontal o paisaje (landscape). Una simple cuestión de nomenclatura. Vamos allá:

OPCIÓN 1: UtilizaNDO la API MOBILE

Podemos utilizar el método de la API mobile que escucha un evento orientationchange. Así de sencillo:

[javascript]<script>// Escuchar cambios de orientación
window.addEventListener("orientationchange", function() {
// Hacer algo cuando cambia la orientación
alert(window.orientation);
}, false);</script>[/javascript]

Cuando se produce un cambio, la propiedad window.orientation toma los siguientes valores:

  • 0 = orientación portrait o retrato
  • -90 = orientación paisaje o landscape a la derecha
  • 90 = orientación paisaje o landscape a la izquierda
  • 180 = orientación portrait o retrato invertida

OPCIÓN 2: jQuery Mobile

Como su nombre hace sospechar, jQuery Mobile no es más que una extensión de jQuery con algunas funcionalidades útiles en navegadores móviles.

Sin entrar en muchos detalles, os mostramos el código equivalente al de la Opción 1:

[javascript]
<script>
// Escuchar un evento window.orientationchange
$( window ).on( "orientationchange", function( event ) {
alert( "Este dispositivo está en modo " + event.orientation);
});
</script>
[/javascript]

Ya hablamos en su día de la gestión sencilla de eventos en jQuery usando .on(). La principal diferencia es que la propiedad event.orientation adquiere aquí los siguientes valores como cadena de caracteres:
  • “portrait” = modo retrato o vertical
  • “landscape” = modo paisaje u horizontal

La documentación completa aquí.

¿Qué opción utilizar?

Todo depende de gustos. La opción 2, con jQuery Mobile, es ligeramente más simple. Pero dependemos de una librería JS que hay descargar y de que tu sitio sea compatible la versión de jQuery asociada. En cambio, con la opción 1 directamente utilizamos la API del navegador, con javascript puro y duro. A mí personalmente me gusta más esta opción. ¿Y a vosotros?

Previous Nuevo nicho de mercado: Relojes inteligentes
Next Diseño e implementación de un modelo jerárquico: Robot. [Código incluido]

About author

Angel
Angel 172 posts

Siempre quise ser inventor y escritor: por lo primero me hice ingeniero, y en cuanto a lo segundo, escribo aquí de vez en cuando sobre telecomunicaciones y tecnología. Me gustan los robots, los perretes y los libros (analógicos).

You might also like

Desarrollo 2 Comentarios

Qué es y cómo funciona Symfony2: Conceptos claves

Symfony2 es uno de los Framework más potentes que existen para desarrollar aplicaciones web. Punto. Pero, ¿cómo funciona? ¿Qué es realmente? Con este artículo, pretendo que te quede claro como

Desarrollo 1Comments

DrupalCamp Spain 2014

Este fín de semana la capital del Turia ha acogido a la DrupalCamp Spain 2014, a la cual fuí en calidad de ponente. No puedo dejar pasar la oportunidad de

Desarrollo 4 Comentarios

Cuándo dejar de ver el Mundo como un Ingeniero: quien esté libre de optimizar…

Confucio reunió a sus discípulos y les dijo: “Un optimista ve un vaso medio lleno. Un pesimista ve un vaso medio vacío. Un ingeniero ve un vaso demasiado grande“. Lo

1 Comentario

  1. Marc
    marzo 07, 09:08 Reply

    Gracias por la información!muy útil! :)

Deja un comentario