Detectar la rotación del dispositivo con jQuery Mobile

13/May/2012 Desarrollo Móvil , , , , , , , , , 4 Comentarios

Una de las capacidades de los dispositivos móviles, ya sean smartphones o tablets, es que podemos girar el dispositivo y visualizar el contenido en dos posiciones.

Las dos posiciones son conocidas como landscape (apaisado u horizontal) y portrait (retrato o vertical).

Cuando estamos contruyendo nuestra aplicación para dispositivos móviles es interesante el conocer cuándo el usuario ha decidido rotar el dispositivo. Ya que puede ser que necesitemos reajustar algo en la visualización de nuestra página.

Es por ello que jQuery Mobile nos proporciona un mecanismo para detectar la rotación del dispositivo. Este mecanismo es un evento, el evento orientationchange. Entonces lo que tenemos que hacer es escuchar al evento orientationchange y asignar una función para cuando se produzca dicho evento. Esto lo conseguimos mediante el método .bind().

  1. $(window).bind("orientationchange", function(event){...});

Dentro de la información del evento nos viene la orientación en la que el usuario ha puesto al dispositivo. En concreto viene en event.orientation. Los valores de event.orientation son "landscape" y "portrait".

Así, lo que haremos será, si viene el valor de event.orientation, asignaremos ese valor al contenido de una capa que hemos añadido en el contenido de la página

  1. $(window).bind("orientationchange", function(event){
  2. if (event.orientation)
  3. $("#contenido").html("Me han reorientado a " + event.orientation);
  4. });

La capa sería:

  1. <div data-role="content">
  2. Ejemplo que controla la rotaci&oacute;n del dispositivo movil.
  3. <span id="contenido">Inicio de la Aplicación</span>
  4. </div>

Para la gestión del evento deberemos de esperar a que se haya cargado todo el contenido de la página. Es por ello que pondremos el código de gestión del evento para detectar la rotación del dispositivo dentro del evento .ready() de jQuery.

  1. $(document).ready(function(){
  2. $(window).bind("orientationchange", function(event){
  3. if (event.orientation)
  4. $("#contenido").html("Me han reorientado a " + event.orientation);
  5. });
  6. });

Por último deberemos de hacer es lanzar, por nosotros mismos, el evento orientationchange para que se calcule la orientación inicial del dispositivo. Pera esto nos apoyamos en el método .trigger().

  1. $(window).trigger("orientationchange");

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Detectar la rotación del dispositivo con jQuery Mobile”

Víctor Cuervo

hektor

Hola muy buen articulo…una pregunta: como puedo hacer para desactivar la orintación en landscape? es decir solo quiero que visualizen el sitio desde la oritación portrait, y que cuando lo roten siga en portrait…
hize algo así y no funciono…

$(window).trigger(“orientationchange”);
$(window).bind(“orientationchange”, function(event){

if(event.orientation == ‘landscape’)
{
alert(‘hola’);
event.preventDefault();
event.orientation = ‘portrait’;
}
});

la funcion llega hasta el alert pero ya despues no funciona 😛

Gracias

Víctor Cuervo

Cristian

Pregunta, ¿Cómo hacer que muestre un contenido diferente para cada evento?
Es decir si se voltea se visualice un contenido diferente al otro.

Víctor Cuervo

Víctor Cuervo

@Sergio,

El evento “orientationchange” salta cada vez que giras el dispositivo. Por lo cual, si estás ejecutando la aplicación en el momento que gires debería de cambiarse el layout.

¿Te suelta algún error?

Saludos.

Víctor Cuervo

Sergio

Buen artículo, pero en tiempo de ejecución también se llamaría a esa función?. En mi caso por ejemplo, el dispositivo inicia en portrait después cambió la orientación y truena la app

Los comentarios están cerrados.