jueves, 1 de agosto de 2013

Detectar dispositivo móvil con Jquery

A continuación veremos como detectar con Jquery los dispositivos móviles más importantes a través de la conjugación de navigator.userAgent y match. Los dispositivos móviles detectados son ..

- Android
- BlackBerry
- Iphone | iPad | iPod
- Opera Mini
- IEMobile

A través de las opciones se puede cargar un estilo o página determinada adaptada al dispositivo móvil seleccionado.

Es decir, por ejemplo redireccionar a la plantilla adaptativa de android ...

 if (isMobile.Android())
{
window.location = "http://www.miweb.com/android/";
}

A continuación podéis ver el código completo, sólo hay que cambiar las alertas por las acciones que se quieran realizar ...

<script>
$(function(){

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
 };

 if (isMobile.Android())
 {
 alert("Android");
 }
 else if (isMobile.BlackBerry())
 {
 alert("BlackBerry");
 }
 else if (isMobile.iOS())
 {
 alert("Iphone");
 }
 else if (isMobile.Opera())
 {
 alert("Opera");
 }
 else if (isMobile.Windows())
 {
 alert("IEMobile");
 }
 else
 {
 alert("Default");
 }
});
</script>


Keywords: Detectar, Dispositivo, Móvil, Jquery, Android, Iphone, Ipad, Ipod, Blackberry, Opera Mini, IEMobile