Qual é a melhor maneira de detectar um dispositivo móvel?

Existe uma maneira sólida de detectar se um usuário está ou não usando um dispositivo móvel no jQuery? Algo semelhante ao atributo CSS @media? Gostaria de executar um script diferente se o navegador estiver em um dispositivo portátil.

A $.browserfunção jQuery não é o que estou procurando.

Nota do editor: a detecção de agente do usuário não é uma técnica recomendada para aplicativos da web modernos. Veja os comentários abaixo desta resposta para confirmação deste fato. É recomendável usar uma das outras respostas usando a detecção de recursos e / ou consultas de mídia.

Em vez de usar o jQuery, você pode usar JavaScript simples para detectá-lo:

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

Ou você pode combinar os dois para torná-lo mais acessível através do jQuery ...

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

Agora $.browserretornará "device"para todos os dispositivos acima

Nota: $.browserremovido no jQuery v1.9.1 . Mas você pode usar isso usando o código de plug-in de migração jQuery

Uma versão mais 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 mim pequeno é lindo, então estou usando esta técnica:

No arquivo CSS:

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

No arquivo 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
    }
 });

Meu objetivo era ter meu site "otimizado para celular". Então, eu uso CSS Media Queries para mostrar / ocultar elementos, dependendo do tamanho da tela.

Por exemplo, na minha versão móvel, não quero ativar o Facebook Like Box, porque ele carrega todas essas imagens de perfil e outras coisas. E isso não é bom para visitantes móveis. Portanto, além de ocultar o elemento container, também faço isso dentro do bloco de código jQuery (acima):

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

Você pode vê-lo em ação em http://lisboaautentica.com

Ainda estou trabalhando na versão móvel, por isso ainda não está parecendo como deveria, ao escrever isso.

Atualizar por dekin88

Há uma API JavaScript integrada para a detecção de mídia. Em vez de usar a solução acima, basta usar o seguinte:

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

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

Suporte ao navegador: http://caniuse.com/#feat=matchmedia

A vantagem desse método é que ele não é apenas mais simples e mais curto, mas você pode direcionar condicionalmente diferentes dispositivos, como smartphones e tablets separadamente, se necessário, sem precisar adicionar elementos fictícios no DOM.

De acordo com o Mozilla - Detecção de navegador usando o agente do usuário :

Em resumo, recomendamos procurar a string "Mobi" em qualquer lugar do User Agent para detectar um dispositivo móvel.

Como isso:

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

Isso corresponderá a todos os agentes comuns de usuários de navegadores móveis, incluindo Mozilla, Safari, IE, Opera, Chrome, etc.

Atualização para Android

EricL recomenda testar Androidtambém como agente de usuário, pois a cadeia de agente de usuário do Chrome para tablets não inclui "Mobi" (as versões do telefone, no entanto):

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

Uma linha simples e eficaz:

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

No entanto, o código acima não leva em consideração o caso de laptops com tela sensível ao toque. Portanto, forneço esta segunda versão, com base na solução @Julian :

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

O que você está fazendo, querendo detectar um dispositivo móvel, está chegando muito perto de um IMO do conceito "browser sniffing". Provavelmente seria muito melhor fazer alguma detecção de recurso. Bibliotecas como http://www.modernizr.com/ podem ajudar com isso.

Por exemplo, onde está a linha entre móvel e não móvel? Fica cada vez mais embaçado todos os dias.

Não é jQuery, mas achei o seguinte: http://detectmobilebrowser.com/

Ele fornece scripts para detectar navegadores móveis em vários idiomas, um dos quais é JavaScript. Isso pode ajudá-lo com o que você está procurando.

No entanto, como você está usando o jQuery, convém estar ciente da coleção jQuery.support. É uma coleção de propriedades para detectar os recursos do navegador atual. A documentação está aqui: http://api.jquery.com/jQuery.support/

Como não sei exatamente o que você está tentando realizar, não sei qual será a mais útil.

Tudo isso dito, acho que sua melhor aposta é redirecionar ou escrever um script diferente para a saída usando uma linguagem do lado do servidor (se isso for uma opção). Como você realmente não conhece os recursos de um navegador móvel x, executar a lógica de detecção e alteração no lado do servidor seria o método mais confiável. Claro, tudo isso é um ponto discutível se você não pode usar um idioma do lado do servidor :)

Às vezes, é desejável saber qual dispositivo de marca um cliente está usando para mostrar conteúdo específico para esse dispositivo, como um link para a loja do iPhone ou o mercado Android. O modernizador é ótimo, mas mostra apenas os recursos do navegador, como HTML5 ou Flash.

Aqui está minha solução UserAgent no jQuery para exibir uma classe 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 solução é da Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Encontrou uma solução em: 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());
    }
};

E, para verificar se é um celular, você pode testar usando:

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

Se por "celular" você quer dizer "tela pequena", eu uso o seguinte:

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

No iPhone, você terminará com uma window.screen.width de 320. No Android, você terminará com uma window.outerWidth of 480 (embora isso possa depender do Android). Os iPads e tablets Android retornam números como 768 para obter a visualização completa como você deseja.

Se você usa o Modernizr , é muito fácil usar Modernizr.touchcomo mencionado anteriormente.

No entanto, eu prefiro usar uma combinação de Modernizr.touche teste de agente de usuário, apenas por segurança.

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
    }

Se você não usa o Modernizr, pode simplesmente substituir a Modernizr.touchfunção acima por('ontouchstart' in document.documentElement)

Observe também que ao testar o agente do usuário, iemobilevocê terá uma gama mais ampla de dispositivos móveis Microsoft detectados do que Windows Phone.

Veja também esta pergunta do SO

Você não pode confiar navigator.userAgent, nem todo dispositivo revela seu verdadeiro sistema operacional. No meu HTC, por exemplo, depende das configurações (ligar / desligar a versão móvel). Em http://my.clockodo.com , simplesmente usamos screen.widthpara detectar pequenos dispositivos. Infelizmente, em algumas versões do Android, há um erro no screen.width. Você pode combinar dessa maneira com o 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");
}

Eu sei que esta pergunta tem muitas respostas, mas pelo que vi, ninguém se aproxima da resposta da maneira que eu resolveria isso.

O CSS usa a largura (Consultas de mídia) para determinar quais estilos aplicados ao documento da Web se baseiam na largura. Por que não usar largura no JavaScript?

Por exemplo, nas consultas de mídia do Bootstrap (Mobile First), existem 4 pontos de snap / break:

• Os dispositivos extra pequenos têm 768 pixels ou menos.
• Os dispositivos pequenos variam de 768 a 991 pixels.
• Os dispositivos médios variam de 992 a 1199 pixels.
• Os dispositivos grandes têm 1200 pixels ou mais.

Podemos usar isso para também resolver nosso problema de JavaScript.

Primeiro, criaremos uma função que obtém o tamanho da janela e retorna um valor que nos permite ver qual tamanho de dispositivo está visualizando nosso aplicativo:

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"
    }
};

Agora que temos a função configurada, podemos chamá-la e armazenar o valor:

var device = getBrowserWidth();

Sua pergunta foi

Gostaria de executar um script diferente se o navegador estiver em um dispositivo portátil.

Agora que temos as informações do dispositivo, tudo o que resta é uma instrução if:

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

Aqui está um exemplo no CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Em uma linha de javascript:

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

Se o agente do usuário contiver 'Mobi' (conforme MDN) e o ontouchstart estiver disponível, é provável que seja um dispositivo móvel.

Estou surpreso que ninguém tenha apontado um site legal: http://detectmobilebrowsers.com/ Ele já criou código em diferentes idiomas para detecção móvel (incluindo, mas não se limitando a):

• Apache
• ASP
• C #
• IIS
• Javascript
• NGINX
• PHP
• Perl
• Pitão
• Trilhos

E se você precisar detectar os tablets também, basta verificar a seção Sobre para obter mais parâmetros RegEx.

Tablets, iPads, Fires Kindle e PlayBooks Android não são detectados por design. Para adicionar suporte para tablets, adicione |android|ipad|playbook|silkao primeiro regex.

Se você não estiver particularmente preocupado com telas pequenas, poderá usar a detecção de largura / altura. Dessa forma, se a largura estiver abaixo de um determinado tamanho, o site móvel será exibido. Pode não ser o caminho perfeito, mas provavelmente será o mais fácil de detectar para vários dispositivos. Pode ser necessário inserir um específico para o iPhone 4 (resolução grande).

Para adicionar uma camada extra de controle, eu uso o armazenamento HTML5 para detectar se ele está usando armazenamento móvel ou de desktop. Se o navegador não suportar armazenamento, tenho uma variedade de nomes de navegadores móveis e comparo o agente do usuário com os navegadores da matriz.

É bem simples. Aqui está a função:

// 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;
}

Se for constatado que apenas verificar navigator.userAgentnem sempre é confiável. Maior confiabilidade pode ser alcançada também verificando navigator.platform. Uma simples modificação em uma resposta anterior parece funcionar melhor:

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

Aconselho que você verifique http://wurfl.io/

Em poucas palavras, se você importar um pequeno arquivo JavaScript:

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

Você ficará com um objeto JSON que se parece com:

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

(Isso pressupõe que você esteja usando um Nexus 7, é claro) e poderá fazer coisas como:

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

Isto é o que você está procurando.

Isenção de responsabilidade: trabalho para a empresa que oferece este serviço gratuito.

Confira esta postagem , ele fornece um snippet de código muito bom sobre o que fazer quando dispositivos touch são detectados ou o que fazer se o evento touchstart for chamado:

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

Aqui está uma função que você pode usar para obter uma resposta verdadeira / falsa sobre se você está executando em um navegador móvel. Sim, é farejador de navegador, mas às vezes é exatamente isso que você precisa.

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 as respostas usam user-agent para detectar o navegador, mas a detecção de dispositivo com base em user-agent não é uma solução muito boa, melhor é detectar recursos como o dispositivo de toque (no novo jQuery, eles removem $.browsere usam$.support ).

Para detectar dispositivos móveis, você pode verificar se há eventos de toque:

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

Retirado de Qual é a melhor maneira de detectar um dispositivo 'touch screen' usando JavaScript?

Eu sugeriria usar o seguinte combo de strings, para verificar se o tipo de dispositivo está sendo usado.

Conforme a documentação da Mozilla, a string Mobié recomendada. Porém, alguns dos tablets antigos não retornam true se Mobiusados apenas , portanto, devemos usarTablet string também.

Da mesma forma, por estar do lado seguro iPadeiPhone cordas também pode ser usado para verificar o tipo de dispositivo.

A maioria dos novos dispositivos retornaria apenas truepara a Mobistring.

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

Você pode usar a consulta de mídia para poder lidar com isso facilmente.

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

Ótima resposta, obrigado. Pequena melhoria no suporte ao Windows phone e 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";
}

Usa isto:

/**  * 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);

Então use isto:

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

Função simples com base em 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>

Se você acessar qualquer navegador e tentar obter navigator.userAgent, obteremos as informações do navegador, como a seguir

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

A mesma coisa, se você faz no celular, estará seguindo

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

Todos os navegadores móveis terão useragent com uma string contendo "Mobile". Por isso, estou usando o snippet acima no meu código para verificar se o agente atual do usuário é web / mobile. Com base no resultado, farei as alterações necessárias.

Eu uso isso

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

Que tal mobiledetect.net ?

Outras soluções parecem muito básicas. Esta é uma classe PHP leve. Ele usa a sequência User-Agent combinada com cabeçalhos HTTP específicos para detectar o ambiente móvel. Você também pode se beneficiar do Mobile Detect usando qualquer um dos plug-ins de terceiros disponíveis para: WordPress, Drupal, Joomla, Magento, etc.

As strings do agente do usuário não devem ser confiáveis ​​sozinhas. A solução abaixo funcionará em todas as situações.

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

e chame esta função:

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