¿Cuál es la mejor manera de detectar un dispositivo móvil?

¿Hay una manera sólida de detectar si un usuario está utilizando un dispositivo móvil en jQuery? ¿Algo similar al atributo CSS @media? Me gustaría ejecutar un script diferente si el navegador está en un dispositivo portátil.

La $.browserfunción jQuery no es lo que estoy buscando.

Nota del editor: la detección de agentes de usuario no es una técnica recomendada para las aplicaciones web modernas. Vea los comentarios debajo de esta respuesta para confirmar este hecho. Se sugiere utilizar una de las otras respuestas mediante la detección de funciones y / o consultas de medios.

En lugar de usar jQuery, puede usar JavaScript simple para detectarlo:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

O puede combinarlos para que sea más accesible a través de jQuery ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Ahora $.browserregresará "device"para todos los dispositivos anteriores

Nota: $.browsereliminado en jQuery v1.9.1 . Pero puede usar esto usando el código del complemento de migración jQuery

Una versión más completa:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

Para mí lo pequeño es hermoso, así que estoy usando esta técnica:

En archivo CSS:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

En el archivo jQuery / JavaScript:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now I can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

Mi objetivo era tener mi sitio "apto para dispositivos móviles". Así que uso CSS Media Queries mostrar / ocultar elementos dependiendo del tamaño de la pantalla.

Por ejemplo, en mi versión móvil no quiero activar el Me gusta de Facebook, porque carga todas esas imágenes de perfil y otras cosas. Y eso no es bueno para los visitantes móviles. Entonces, además de ocultar el elemento contenedor, también hago esto dentro del bloque de código jQuery (arriba):

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

Puedes verlo en acción en http://lisboaautentica.com

Todavía estoy trabajando en la versión móvil, por lo que todavía no se ve como debería, al momento de escribir esto.

Actualización por dekin88

Hay una API de JavaScript incorporada para detectar medios. En lugar de usar la solución anterior, simplemente use lo siguiente:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

Navegador compatible: http://caniuse.com/#feat=matchmedia

La ventaja de este método es que no solo es más simple y más corto, sino que puede apuntar condicionalmente a diferentes dispositivos como teléfonos inteligentes y tabletas por separado si es necesario sin tener que agregar ningún elemento ficticio en el DOM.

Según Mozilla - Detección del navegador utilizando el agente de usuario :

En resumen, recomendamos buscar la cadena "Mobi" en cualquier parte del Agente de usuario para detectar un dispositivo móvil.

Me gusta esto:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

Esto coincidirá con todos los agentes de usuario de navegador móvil comunes, incluidos Mozilla móvil, Safari, IE, Opera, Chrome, etc.

Actualización para Android

EricL recomienda realizar pruebas Androidcomo agente de usuario también, ya que la cadena de agente de usuario de Chrome para tabletas no incluye "Mobi" (sin embargo, las versiones del teléfono sí lo hacen):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

Una línea simple y efectiva:

function isMobile() { return ('ontouchstart' in document.documentElement); }

Sin embargo, el código anterior no tiene en cuenta el caso de las computadoras portátiles con pantalla táctil. Por lo tanto, proporciono esta segunda versión, basada en la solución @Julian :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

Lo que está haciendo al querer detectar un dispositivo móvil es acercarse demasiado a un concepto IMO de "rastreo del navegador". Probablemente sería mucho mejor hacer alguna detección de características. Bibliotecas como http://www.modernizr.com/ pueden ayudar con eso.

Por ejemplo, ¿dónde está la línea entre móvil y no móvil? Se pone cada vez más borrosa cada día.

No es jQuery, pero encontré esto: http://detectmobilebrowser.com/

Proporciona scripts para detectar navegadores móviles en varios idiomas, uno de los cuales es JavaScript. Eso puede ayudarlo con lo que está buscando.

Sin embargo, dado que está utilizando jQuery, es posible que desee conocer la colección jQuery.support. Es una colección de propiedades para detectar las capacidades del navegador actual. La documentación está aquí: http://api.jquery.com/jQuery.support/

Como no sé qué es exactamente lo que está tratando de lograr, no sé cuál de estos será el más útil.

Dicho todo esto, creo que su mejor opción es redirigir o escribir un script diferente a la salida utilizando un lenguaje del lado del servidor (si esa es una opción). Como realmente no conoce las capacidades de un navegador móvil x, hacer la detección y la lógica de alteración en el lado del servidor sería el método más confiable. Por supuesto, todo eso es un punto discutible si no puede usar un lenguaje del lado del servidor :)

A veces se desea saber qué dispositivo de marca está utilizando un cliente para mostrar contenido específico de ese dispositivo, como un enlace a la tienda de iPhone o al mercado de Android. Modernizer es excelente, pero solo muestra las capacidades del navegador, como HTML5 o Flash.

Aquí está mi solución UserAgent en jQuery para mostrar una clase diferente para cada tipo de dispositivo:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

Esta solución es de Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Encontré una solución en: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

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());
    }
};

Y luego para verificar si se trata de un dispositivo móvil, puede probar usando:

if(isMobile.any()) {
   //some code...
}

Si por "móvil" te refieres a "pantalla pequeña", uso esto:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

En iPhone terminarás con un ancho de pantalla.pantalla de 320. En Android terminarás con un ancho de ventana.outer de 480 (aunque eso puede depender del Android). Los iPads y las tabletas Android devolverán números como 768 para que puedan obtener la vista completa como desearían.

Si usa Modernizr , es muy fácil de usar Modernizr.touchcomo se mencionó anteriormente.

Sin embargo, prefiero usar una combinación de Modernizr.touchpruebas de agente de usuario, solo para estar seguro.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Si no usa Modernizr, simplemente puede reemplazar la Modernizr.touchfunción anterior con('ontouchstart' in document.documentElement)

También tenga en cuenta que probar el agente de usuario iemobilele dará una gama más amplia de dispositivos móviles de Microsoft detectados que Windows Phone.

También vea esta pregunta SO

No puede confiar navigator.userAgent, no todos los dispositivos revelan su sistema operativo real. En mi HTC, por ejemplo, depende de la configuración (activar / desactivar la "versión móvil"). En http://my.clockodo.com , simplemente utilizamos screen.widthpara detectar dispositivos pequeños. Desafortunadamente, en algunas versiones de Android hay un error con screen.width. Puede combinarlo de esta manera con el UserAgent:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

Sé que esta pregunta tiene muchas respuestas, pero por lo que vi, nadie se acerca a la respuesta de la forma en que resolvería esto.

CSS usa el ancho (Consultas de medios) para determinar qué estilos se aplicaron al documento web basado en el ancho. ¿Por qué no usar el ancho en JavaScript?

Por ejemplo, en las consultas de medios de Bootstrap (Mobile First), existen 4 puntos de ajuste / interrupción:

• Los dispositivos extra pequeños tienen 768 píxeles y menos.
• Los dispositivos pequeños varían de 768 a 991 píxeles.
• Los dispositivos medianos varían de 992 a 1199 píxeles.
• Los dispositivos grandes tienen 1200 píxeles o más.

Podemos usar esto para resolver también nuestro problema de JavaScript.

Primero crearemos una función que obtenga el tamaño de la ventana y devuelva un valor que nos permita ver qué tamaño de dispositivo está visualizando nuestra aplicación:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

Ahora que tenemos configurada la función, podemos llamarla y almacenar el valor:

var device = getBrowserWidth();

Tu pregunta fue

Me gustaría ejecutar un script diferente si el navegador está en un dispositivo portátil.

Ahora que tenemos la información del dispositivo, todo lo que queda es una declaración if:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

Aquí hay un ejemplo en CodePen: http://codepen.io/jacob-king/pen/jWEeWG

En una línea de javascript:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

Si el agente de usuario contiene 'Mobi' (según MDN) y ontouchstart está disponible, entonces es probable que sea un dispositivo móvil.

Me sorprende que nadie haya señalado un buen sitio: http://detectmobilebrowsers.com/ Tiene un código listo en diferentes idiomas para la detección móvil (incluidos, entre otros):

• apache
• ÁSPID
• C#
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Pitón
• Rieles

Y si también necesita detectar las tabletas, simplemente consulte la sección Acerca de para obtener un parámetro RegEx adicional.

Las tabletas Android, iPads, Kindle Fires y PlayBooks no se detectan por diseño. Para agregar soporte para tabletas, agregue |android|ipad|playbook|silka la primera expresión regular.

Si no está particularmente preocupado por las pantallas pequeñas, puede usar la detección de ancho / alto. De esta forma, si el ancho es inferior a un cierto tamaño, el sitio móvil se activa. Puede que no sea la forma perfecta, pero probablemente será la más fácil de detectar para múltiples dispositivos. Es posible que deba colocar uno específico para el iPhone 4 (gran resolución).

Para agregar una capa adicional de control, uso el almacenamiento HTML5 para detectar si está usando almacenamiento móvil o almacenamiento de escritorio. Si el navegador no admite almacenamiento, tengo una matriz de nombres de navegador móvil y comparo el agente de usuario con los navegadores de la matriz.

Es bastante simple Aquí está la función:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

Si se encuentra que solo verificar navigator.userAgentno siempre es confiable. Se puede lograr una mayor confiabilidad al verificar también navigator.platform. Una modificación simple a una respuesta anterior parece funcionar mejor:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

Te aconsejo que revises http://wurfl.io/

En pocas palabras, si importa un pequeño archivo JavaScript:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Te quedarás con un objeto JSON que se parece a:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(Eso supone que está utilizando un Nexus 7, por supuesto) y podrá hacer cosas como:

if(WURFL.is_mobile) {
    //dostuff();
}

Esto es lo que estás buscando.

Descargo de responsabilidad: trabajo para la empresa que ofrece este servicio gratuito.

Echa un vistazo a esta publicación , proporciona un fragmento de código realmente agradable para saber qué hacer cuando se detectan dispositivos táctiles o qué hacer si se llama al evento touchstart:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

Aquí hay una función que puede usar para obtener una respuesta verdadera / falsa sobre si está ejecutando en un navegador móvil. Sí, es un buscador de navegador, pero a veces eso es exactamente lo que necesita.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

Todas las respuestas usan user-agent para detectar el navegador, pero la detección de dispositivos basada en user-agent no es una solución muy buena, mejor es detectar funciones como el dispositivo táctil (en el nuevo jQuery se eliminan $.browsery usan $.supporten su lugar).

Para detectar dispositivos móviles, puede verificar los eventos táctiles:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Tomado de ¿Cuál es la mejor manera de detectar un dispositivo de 'pantalla táctil' usando JavaScript?

Sugeriría usar el siguiente combo de cadenas para verificar si se usa el tipo de dispositivo.

Según la cadena de documentación de Mozilla,Mobi se recomienda. Pero, algunas de las tabletas antiguas no devuelven verdadero si solo Mobise usa, por lo tanto, también deberíamos usar Tabletcadenas.

Del mismo modo, por estar en el lado seguro iPady las iPhonecadenas también podrían usarse para verificar el tipo de dispositivo.

La mayoría de los nuevos dispositivos volverían solo truepara la Mobicadena.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

Puede usar la consulta de medios para poder manejarla fácilmente.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

Gran respuesta gracias. Pequeña mejora para admitir Windows phone y Zune:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}

Utilizar este:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Entonces usa esto:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Función simple basada en http://detectmobilebrowser.com/

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));
}

<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Si pasa a cualquier navegador y trata de obtener navigator.userAgent, obtendremos la información del navegador de la siguiente manera:

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 64.0.3282.186 Safari / 537.36

Lo mismo si haces en el móvil, recibirás seguimiento

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, como Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

Cada navegador móvil tendrá un agente de uso con una cadena que contenga "Móvil". Por lo tanto, estoy usando el fragmento anterior en mi código para verificar si el agente de usuario actual es web / móvil. Según el resultado, haré los cambios necesarios.

yo uso esto

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

¿Qué tal mobiledetect.net ?

Otras soluciones parecen demasiado básicas. Esta es una clase PHP ligera. Utiliza la cadena de User-Agent combinada con encabezados HTTP específicos para detectar el entorno móvil. También puede beneficiarse de Mobile Detect utilizando cualquiera de los complementos de terceros disponibles para: WordPress, Drupal, Joomla, Magento, etc.

No se debe confiar solo en las cadenas de agente de usuario. La solución a continuación funcionará en todas las situaciones.

function isMobile(a) {
  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
}

y llama a esta función:

isMobile(navigator.userAgent || navigator.vendor || window.opera)