Qual è il modo migliore per rilevare un dispositivo mobile?

Esiste un modo solido per rilevare se un utente utilizza o meno un dispositivo mobile in jQuery? Qualcosa di simile all'attributo CSS @media? Vorrei eseguire uno script diverso se il browser si trova su un dispositivo portatile.

La $.browserfunzione jQuery non è ciò che sto cercando.

Nota dell'editore: il rilevamento dell'agente utente non è una tecnica consigliata per le app Web moderne. Vedi i commenti sotto questa risposta per la conferma di questo fatto. Si consiglia di utilizzare una delle altre risposte utilizzando il rilevamento delle funzionalità e / o le query multimediali.

Invece di usare jQuery puoi usare JavaScript semplice per rilevarlo:

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

Oppure puoi combinarli entrambi per renderlo più accessibile tramite jQuery ...

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

Ora $.browsertornerà "device"per tutti i dispositivi sopra

Nota: $.browserrimosso su jQuery v1.9.1 . Ma puoi usarlo usando il codice del plugin di migrazione jQuery

Una versione più approfondita:

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

Per me piccolo è bello, quindi sto usando questa tecnica:

Nel file CSS:

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

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

Il mio obiettivo era di avere il mio sito "ottimizzato per dispositivi mobili". Quindi uso CSS Media Query per mostrare / nascondere gli elementi a seconda delle dimensioni dello schermo.

Ad esempio, nella mia versione mobile non voglio attivare la Like Box di Facebook, perché carica tutte quelle immagini e cose del profilo. E questo non va bene per i visitatori mobili. Quindi, oltre a nascondere l'elemento contenitore, lo faccio anche all'interno del blocco di codice jQuery (sopra):

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

Puoi vederlo in azione su http://lisboaautentica.com

Sto ancora lavorando sulla versione mobile, quindi non sembra ancora come dovrebbe, al momento di scrivere questo.

Aggiornamento di dekin88

Esiste un'API JavaScript integrata per il rilevamento dei media. Invece di utilizzare la soluzione sopra è sufficiente utilizzare quanto segue:

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

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

Supporti browser: http://caniuse.com/#feat=matchmedia

Il vantaggio di questo metodo è che non è solo più semplice e più breve, ma è possibile targetizzare condizionatamente diversi dispositivi come smartphone e tablet separatamente, se necessario, senza dover aggiungere elementi fittizi nel DOM.

Secondo Mozilla - Rilevamento del browser tramite l'agente utente :

In breve, consigliamo di cercare la stringa "Mobi" in qualsiasi punto dell'agente utente per rilevare un dispositivo mobile.

Come questo:

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

Ciò corrisponderà a tutti i comuni agenti utente del browser mobile, inclusi Mozilla mobile, Safari, IE, Opera, Chrome, ecc.

Aggiornamento per Android

EricL consiglia inoltre di eseguire il test Androidcome agente utente, poiché la stringa dell'agente utente di Chrome per tablet non include "Mobi" (tuttavia le versioni del telefono):

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

Una linea semplice ed efficace:

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

Tuttavia, il codice sopra riportato non tiene conto del caso dei laptop con touchscreen. Pertanto, fornisco questa seconda versione, basata sulla soluzione @Julian :

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

Quello che stai facendo desiderando rilevare un dispositivo mobile è avvicinarti un po 'troppo a un concetto di "fiuto del browser" IMO. Probabilmente sarebbe molto meglio fare un po 'di rilevamento delle caratteristiche. Biblioteche come http://www.modernizr.com/ possono aiutarti in questo.

Ad esempio, dov'è la linea tra mobile e non mobile? Diventa sempre più sfocato ogni giorno.

Non è jQuery, ma ho trovato questo: http://detectmobilebrowser.com/

Fornisce script per rilevare i browser mobili in diverse lingue, uno dei quali è JavaScript. Questo potrebbe aiutarti con quello che stai cercando.

Tuttavia, poiché si utilizza jQuery, è possibile che si desideri conoscere la raccolta jQuery.support. È una raccolta di proprietà per rilevare le funzionalità del browser corrente. La documentazione è qui: http://api.jquery.com/jQuery.support/

Dal momento che non so che cosa esattamente stai cercando di realizzare, non so quale di questi sarà il più utile.

Detto questo, penso che la soluzione migliore sia quella di reindirizzare o scrivere uno script diverso sull'output utilizzando un linguaggio lato server (se questa è un'opzione). Dato che non conosci veramente le capacità di un browser mobile x, fare il rilevamento e la logica di alterazione sul lato server sarebbe il metodo più affidabile. Naturalmente, tutto ciò è un punto controverso se non è possibile utilizzare una lingua lato server :)

A volte si desidera sapere quale dispositivo di marca viene utilizzato da un client al fine di mostrare contenuti specifici per quel dispositivo, come un collegamento all'iPhone store o al mercato Android. Modernizer è eccezionale, ma mostra solo le funzionalità del tuo browser, come HTML5 o Flash.

Ecco la mia soluzione UserAgent in jQuery per visualizzare una classe diversa per ogni tipo di 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();
    }
}

Questa soluzione è tratta da Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Trovata una soluzione in: 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 quindi per verificare se si tratta di un cellulare, è possibile testare utilizzando:

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

Se per "cellulare" intendi "piccolo schermo", utilizzo questo:

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

Su iPhone finirai con un window.screen.width di 320. Su Android finirai con un window.outerLarghezza di 480 (anche se questo può dipendere da Android). iPad e tablet Android restituiranno numeri come 768 in modo da ottenere la visualizzazione completa come desideri.

Se usi Modernizr , è molto facile da usare Modernizr.touchcome menzionato in precedenza.

Tuttavia, preferisco utilizzare una combinazione di Modernizr.touchtest utente e utente, solo per sicurezza.

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 non usi Modernizr, puoi semplicemente sostituire la Modernizr.touchfunzione sopra con('ontouchstart' in document.documentElement)

Si noti inoltre che il test dell'agente utente iemobileoffre una gamma più ampia di dispositivi mobili Microsoft rilevati rispetto a Windows Phone.

Vedi anche questa domanda SO

Non puoi fare affidamento navigator.userAgent, non tutti i dispositivi rivelano il suo vero sistema operativo. Sul mio HTC, ad esempio, dipende dalle impostazioni ("utilizzo della versione mobile" on / off). Su http://my.clockodo.com , abbiamo semplicemente utilizzato screen.widthper rilevare piccoli dispositivi. Sfortunatamente, in alcune versioni di Android c'è un bug con screen.width. È possibile combinare in questo modo con 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");
}

So che questa domanda ha molte risposte, ma da quello che ho visto nessuno si avvicina alla risposta nel modo in cui lo risolverei.

CSS utilizza la larghezza (Media Query) per determinare quali stili applicati al documento Web si basano sulla larghezza. Perché non usare la larghezza in JavaScript?

Ad esempio nelle media query di Bootstrap (Mobile First), esistono 4 punti di snap / break:

• I dispositivi extra piccoli sono 768 pixel e meno.
• I dispositivi di piccole dimensioni vanno da 768 a 991 pixel.
• I dispositivi medi vanno da 992 a 1199 pixel.
• I dispositivi di grandi dimensioni hanno una risoluzione di 1200 pixel e oltre.

Possiamo usarlo per risolvere anche il nostro problema JavaScript.

Per prima cosa creeremo una funzione che ottiene la dimensione della finestra e restituisce un valore che ci consente di vedere quali dimensioni del dispositivo sta visualizzando la nostra applicazione:

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

Ora che abbiamo impostato la funzione, possiamo chiamarla e memorizzare il valore:

var device = getBrowserWidth();

La tua domanda era

Vorrei eseguire uno script diverso se il browser si trova su un dispositivo portatile.

Ora che abbiamo le informazioni sul dispositivo, tutto ciò che rimane è un'istruzione if:

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

Ecco un esempio su CodePen: http://codepen.io/jacob-king/pen/jWEeWG

In una riga di JavaScript:

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

Se l'agente utente contiene "Mobi" (come da MDN) e intouchstart è disponibile, è probabile che sia un dispositivo mobile.

Sono sorpreso che nessuno abbia indicato un bel sito: http://detectmobilebrowsers.com/ Ha un codice pronto in diverse lingue per il rilevamento mobile (incluso ma non limitato a):

• Apache
• ASP
• C #
• IIS
• JavaScript
• Nginx
• PHP
• Perl
• Pitone
• Rails

E se è necessario rilevare anche i tablet, basta controllare la sezione Informazioni per ulteriori parametri RegEx.

Tablet Android, iPad, Kindle Fire e PlayBooks non vengono rilevati dal design. Per aggiungere supporto per tablet, aggiungi |android|ipad|playbook|silkal primo regex.

Se non sei particolarmente preoccupato per i display di piccole dimensioni, puoi utilizzare il rilevamento di larghezza / altezza. In questo modo, se la larghezza è inferiore a una determinata dimensione, viene lanciato il sito mobile. Potrebbe non essere il modo perfetto, ma sarà probabilmente il più facile da rilevare per più dispositivi. Potrebbe essere necessario inserirne uno specifico per iPhone 4 (risoluzione elevata).

Per aggiungere un ulteriore livello di controllo, utilizzo l'archiviazione HTML5 per rilevare se utilizza l'archiviazione mobile o l'archiviazione desktop. Se il browser non supporta l'archiviazione, ho una matrice di nomi di browser mobili e confronto l'agente utente con i browser della matrice.

È abbastanza semplice Ecco la funzione:

// 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 trovato che solo il controllo navigator.userAgentnon è sempre affidabile. Una maggiore affidabilità può essere ottenuta anche controllando navigator.platform. Una semplice modifica a una risposta precedente sembra funzionare meglio:

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

Vi consiglio di dare un'occhiata a http://wurfl.io/

In poche parole, se importi un piccolo file JavaScript:

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

Ti verrà lasciato un oggetto JSON simile a:

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

(Supponendo che tu stia utilizzando un Nexus 7, ovviamente) e sarai in grado di fare cose come:

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

Questo e ciò che stai cercando.

Disclaimer: lavoro per l'azienda che offre questo servizio gratuito.

Dai un'occhiata a questo post , offre uno snippet di codice davvero interessante su cosa fare quando vengono rilevati i dispositivi touch o cosa fare se viene chiamato l'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();
}

Ecco una funzione che puoi utilizzare per ottenere una risposta vera / falsa sul fatto che tu sia in esecuzione su un browser mobile. Sì, annusa il browser, ma a volte è esattamente ciò di cui hai bisogno.

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

Tutte le risposte utilizzano user-agent per rilevare il browser, ma il rilevamento dei dispositivi basato su user-agent non è un'ottima soluzione, è meglio rilevare funzionalità come il dispositivo touch (nel nuovo jQuery rimuovono $.browsere usano$.support invece).

Per rilevare dispositivi mobili è possibile verificare la presenza di eventi touch:

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

Preso da Qual è il modo migliore per rilevare un dispositivo "touch screen" utilizzando JavaScript?

Vorrei suggerire di utilizzare la seguente combinazione di stringhe, per verificare se si utilizza il tipo di dispositivo.

Come da Mozilla documentazione stringa Mobiè raccomandato. Ma alcuni dei vecchi tablet non tornano veri se Mobiusati solo , quindi dovremmo usareTablet anche la stringa.

Allo stesso modo, per essere al sicuro iPadeiPhone stringhe potrebbero anche essere usate per controllare il tipo di dispositivo.

La maggior parte dei nuovi dispositivi ritornerebbe solo trueper la Mobistringa.

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

È possibile utilizzare media query per essere in grado di gestirlo facilmente.

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

Ottima risposta grazie. Piccolo miglioramento per supportare 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 questo:

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

Quindi usa questo:

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

Semplice funzione basata su 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 vai su qualsiasi browser e se provi a ottenere navigator.userAgent, otterremo le informazioni del browser come segue

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

La stessa cosa se lo fai in mobile seguirai

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

Ogni browser mobile avrà useragent con stringa contenente "Mobile" Quindi sto usando lo snippet sopra nel mio codice per verificare se l'attuale user agent è web / mobile. In base al risultato, eseguirò le modifiche necessarie.

Io lo uso

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

Che ne dici di mobiledetect.net ?

Altre soluzioni sembrano troppo semplici. Questa è una classe PHP leggera. Utilizza la stringa User-Agent combinata con intestazioni HTTP specifiche per rilevare l'ambiente mobile. Puoi anche beneficiare di Mobile Detect utilizzando uno qualsiasi dei plug-in di terze parti disponibili per: WordPress, Drupal, Joomla, Magento, ecc.

Le stringhe dell'agente utente non devono essere considerate attendibili da sole. La soluzione seguente funzionerà in tutte le situazioni.

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 chiama questa funzione:

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