Detectar Dispositivos Móviles y Agregar Una Clase Al Body

El código debajo te permite a detectar dispositivos móviles y agregar una clase al body.

jQuery(document).ready(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);
    },
    any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
  };
         
  if( isMobile.any() ) {
    // alert('mobile device');
    jQuery('body').addClass('mobile');
  };

}); 

Si quieres agregar una clase al body solo para dispositivos Android solo cambia la condición por:

if( isMobile.android() ) {
  jQuery('body').addClass('mobile');
};
  • Tu Aporte esta Excelente, sin embargo pienso que hay que dejar Atrás JS para detectar pantallas móviles y empezar a crear mas cosas con “media queries” CSS3 es muy poderoso, al usar JS para detectar pantallas estamos perdiendo de usar esta propiedad de CSS3 que lo hace mas rápido y nos ahorra código JS, algo a tomar en cuenta ya que mientras mas JS usemos en nuestra Web puede que eso la vuelva mas lenta, esta es una opinión muy personal y la hago porque pienso que el futuro esta en el Responsive Design.

    • Gracias por el comentario CrafterSama, pero en muchas ocasiones surge la necesidad de utilizar JS para añadir alguna funcionalidad extra al sitio, con CSS solo afectamos lo visual por el momento.

  • Craftersama

    Anthuan podrías nombrar algún ejemplo, ya que de verdad que no me queda claro, si se que JS es importante en varios casos, pero en esto del responsive en que casos puntuales lo aplicarías? es bueno tener verias opiniones y luego ir filtrando, de esta manera también se aprende…

    • Es que este ejemplo no se trata de Responsive en si, sino de detectar dispositivos móviles con JS y realizar una acción dependiendo de cual sea, para el Responsive lo recomendable es usar CSS, pero también hay casos donde interviene JS porque CSS se queda corto, dale un vistazo a esta librería.