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().
$(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
$(window).bind("orientationchange", function(event){
if (event.orientation)
$("#contenido").html("Me han reorientado a " + event.orientation);
});
La capa sería:
Ejemplo que controla la rotación del dispositivo movil.
Inicio de la Aplicación
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.
$(document).ready(function(){
$(window).bind("orientationchange", function(event){
if (event.orientation)
$("#contenido").html("Me han reorientado a " + event.orientation);
});
});
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().
$(window).trigger("orientationchange");
