Quelle est la meilleure façon de détecter un appareil mobile?

Existe-t-il un moyen solide de détecter si un utilisateur utilise ou non un appareil mobile dans jQuery? Quelque chose de similaire à l'attribut CSS @media? Je voudrais exécuter un script différent si le navigateur est sur un appareil portable.

La $.browserfonction jQuery n'est pas ce que je recherche.

Note de l'éditeur: la détection d'agent utilisateur n'est pas une technique recommandée pour les applications Web modernes. Voir les commentaires ci-dessous cette réponse pour la confirmation de ce fait. Il est suggéré d'utiliser l'une des autres réponses en utilisant la détection de fonctionnalités et / ou les requêtes multimédias.

Au lieu d'utiliser jQuery, vous pouvez utiliser un simple JavaScript pour le détecter:

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

Ou vous pouvez les combiner pour les rendre plus accessibles via jQuery ...

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

Maintenant $.browser, reviendra "device"pour tous les appareils ci-dessus

Remarque: $.browsersupprimé sur jQuery v1.9.1 . Mais vous pouvez l'utiliser en utilisant le code du plugin de migration jQuery

Une version plus approfondie:

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

Pour moi, petit est beau, donc j'utilise cette technique:

Dans le fichier CSS:

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

Dans le fichier 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
    }
 });

Mon objectif était d'avoir mon site "mobile-friendly". J'utilise donc CSS Media Queries pour afficher / masquer les éléments en fonction de la taille de l'écran.

Par exemple, dans ma version mobile, je ne veux pas activer la Facebook Like Box, car elle charge toutes ces images de profil et tout ça. Et ce n'est pas bon pour les visiteurs mobiles. Donc, en plus de cacher l'élément conteneur, je le fais également à l'intérieur du bloc de code jQuery (ci-dessus):

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

Vous pouvez le voir en action sur http://lisboaautentica.com

Je travaille toujours sur la version mobile, donc ça ne semble toujours pas comme il se doit, au moment d'écrire ceci.

Mise à jour par dekin88

Il existe une API JavaScript intégrée pour détecter les médias. Plutôt que d'utiliser la solution ci-dessus, utilisez simplement ce qui suit:

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

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

Prise en charge du navigateur: http://caniuse.com/#feat=matchmedia

L'avantage de cette méthode est qu'elle est non seulement plus simple et plus courte, mais vous pouvez cibler conditionnellement différents appareils tels que les smartphones et les tablettes séparément si nécessaire sans avoir à ajouter des éléments factices dans le DOM.

Selon Mozilla - Détection du navigateur à l'aide de l'agent utilisateur :

En résumé, nous vous recommandons de rechercher la chaîne «Mobi» n'importe où dans l'agent utilisateur pour détecter un appareil mobile.

Comme ça:

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

Cela correspondra à tous les agents utilisateurs de navigateur mobile courants, y compris Mozilla mobile, Safari, IE, Opera, Chrome, etc.

Mise à jour pour Android

EricL recommande également de tester en Androidtant qu'agent utilisateur, car la chaîne d'agent utilisateur Chrome pour les tablettes n'inclut pas "Mobi" (les versions de téléphone le font cependant):

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

Une doublure simple et efficace:

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

Cependant, le code ci-dessus ne prend pas en compte le cas des ordinateurs portables avec écran tactile. Ainsi, je propose cette deuxième version, basée sur la solution @Julian :

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

Ce que vous faites en voulant détecter un appareil mobile se rapproche un peu trop du concept de «reniflement de navigateur» de l'OMI. Il serait probablement préférable de procéder à la détection de certaines fonctionnalités. Des bibliothèques comme http://www.modernizr.com/ peuvent vous y aider.

Par exemple, où est la frontière entre mobile et non mobile? Il devient de plus en plus flou chaque jour.

Ce n'est pas jQuery, mais j'ai trouvé ceci: http://detectmobilebrowser.com/

Il fournit des scripts pour détecter les navigateurs mobiles dans plusieurs langues, dont JavaScript. Cela peut vous aider avec ce que vous recherchez.

Cependant, étant donné que vous utilisez jQuery, vous souhaiterez peut-être connaître la collection jQuery.support. Il s'agit d'une collection de propriétés pour détecter les capacités du navigateur actuel. La documentation est ici: http://api.jquery.com/jQuery.support/

Puisque je ne sais pas exactement ce que vous essayez d'accomplir, je ne sais pas lequel sera le plus utile.

Cela étant dit, je pense que votre meilleur pari est de rediriger ou d'écrire un script différent vers la sortie en utilisant un langage côté serveur (si c'est une option). Comme vous ne connaissez pas vraiment les capacités d'un navigateur mobile x, la détection et la logique d'altération côté serveur seraient la méthode la plus fiable. Bien sûr, tout cela est un point discutable si vous ne pouvez pas utiliser une langue côté serveur :)

Parfois, il est souhaitable de savoir quel appareil de marque un client utilise afin d'afficher du contenu spécifique à cet appareil, comme un lien vers la boutique iPhone ou le marché Android. Modernizer est génial, mais ne vous montre que les capacités du navigateur, comme HTML5 ou Flash.

Voici ma solution UserAgent dans jQuery pour afficher une classe différente pour chaque type de périphérique:

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

Cette solution provient de Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Trouvé une solution dans: 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());
    }
};

Et puis pour vérifier si c'est un mobile, vous pouvez tester en utilisant:

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

Si par "mobile" vous voulez dire "petit écran", j'utilise ceci:

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

Sur iPhone, vous vous retrouverez avec une window.screen.width de 320. Sur Android, vous vous retrouverez avec une window.outerWidth de 480 (bien que cela puisse dépendre d'Android). Les iPad et les tablettes Android renverront des nombres comme 768 afin qu'ils obtiennent la vue complète comme vous le souhaitez.

Si vous utilisez Modernizr , il est très facile à utiliser Modernizr.touchcomme mentionné précédemment.

Cependant, je préfère utiliser une combinaison de Modernizr.touchtests d'agent utilisateur pour des raisons de sécurité.

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 vous n'utilisez pas Modernizr, vous pouvez simplement remplacer la Modernizr.touchfonction ci-dessus par('ontouchstart' in document.documentElement)

Notez également que le test de l'agent utilisateur iemobilevous donnera une plus large gamme d'appareils mobiles Microsoft détectés que Windows Phone.

Voir aussi cette question SO

Vous ne pouvez pas compter navigator.userAgent, tous les appareils ne révèlent pas leur véritable système d'exploitation. Sur mon HTC par exemple, cela dépend des paramètres ("utilisation de la version mobile" on / off). Sur http://my.clockodo.com , nous avons simplement utilisé screen.widthpour détecter les petits appareils. Malheureusement, dans certaines versions d'Android, il y a un bug avec screen.width. Vous pouvez combiner de cette façon avec 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");
}

Je sais que cette question a beaucoup de réponses, mais d'après ce que j'ai vu, personne n'approche la réponse de la façon dont je résoudrais cela.

CSS utilise la largeur (Media Queries) pour déterminer les styles appliqués au document Web en fonction de la largeur. Pourquoi ne pas utiliser la largeur dans le JavaScript?

Par exemple, dans les requêtes multimédias de Bootstrap (Mobile First), il existe 4 points de rupture / rupture:

• Les petits appareils sont 768 pixels et moins.
• Les petits appareils vont de 768 à 991 pixels.
• Les appareils moyens vont de 992 à 1199 pixels.
• Les grands appareils font 1200 pixels et plus.

Nous pouvons également l'utiliser pour résoudre également notre problème JavaScript.

Nous allons d'abord créer une fonction qui obtient la taille de la fenêtre et renvoie une valeur qui nous permet de voir quelle taille de périphérique affiche notre application:

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

Maintenant que la fonction est configurée, nous pouvons l'appeler et stocker la valeur:

var device = getBrowserWidth();

Votre question était

Je voudrais exécuter un script différent si le navigateur est sur un appareil portable.

Maintenant que nous avons les informations sur l'appareil, il ne reste plus qu'une instruction if:

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

Voici un exemple sur CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Dans une ligne de javascript:

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

Si l'agent utilisateur contient «Mobi» (selon MDN) et qu'un contact tactile est disponible, il s'agit probablement d'un appareil mobile.

Je suis surpris que personne n'ait signalé un beau site: http://detectmobilebrowsers.com/ Il a du code prêt à l'emploi dans différentes langues pour la détection mobile (y compris mais sans s'y limiter):

• Apache
• ASPIC
• C #
• IIS
• Javascript
• NGINX
• PHP
• Perl
• Python
• Rails

Et si vous devez également détecter les tablettes, consultez simplement la section À propos pour obtenir des paramètres RegEx supplémentaires.

Les tablettes Android, iPads, Kindle Fires et PlayBooks ne sont pas détectés par leur conception. Pour ajouter la prise en charge des tablettes, ajoutez |android|ipad|playbook|silkà la première expression régulière.

Si vous n'êtes pas particulièrement préoccupé par les petits écrans, vous pouvez utiliser la détection de largeur / hauteur. Ainsi, si la largeur est inférieure à une certaine taille, le site mobile est lancé. Ce n'est peut-être pas le moyen idéal, mais ce sera probablement le plus facile à détecter pour plusieurs appareils. Vous devrez peut-être en mettre un spécifique pour l'iPhone 4 (grande résolution).

Pour ajouter une couche de contrôle supplémentaire, j'utilise le stockage HTML5 pour détecter s'il utilise le stockage mobile ou le stockage de bureau. Si le navigateur ne prend pas en charge le stockage, j'ai un tableau de noms de navigateur mobile et je compare l'agent utilisateur avec les navigateurs du tableau.

C'est assez simple. Voici la fonction:

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

S'il est constaté que la simple vérification navigator.userAgentn'est pas toujours fiable. Une plus grande fiabilité peut être obtenue en vérifiant également navigator.platform. Une simple modification d'une réponse précédente semble mieux fonctionner:

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

Je vous conseille de consulter http://wurfl.io/

En bref, si vous importez un petit fichier JavaScript:

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

Vous vous retrouverez avec un objet JSON qui ressemble à:

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

(Cela suppose que vous utilisez un Nexus 7, bien sûr) et vous pourrez faire des choses comme:

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

Voilà ce que vous recherchez.

Avertissement: je travaille pour l'entreprise qui propose ce service gratuit.

Consultez cet article , il donne un très bel extrait de code pour savoir quoi faire lorsque des appareils tactiles sont détectés ou quoi faire si un événement touchstart est appelé:

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

Voici une fonction que vous pouvez utiliser pour obtenir une réponse vraie / fausse indiquant si vous utilisez un navigateur mobile. Oui, il renifle le navigateur, mais parfois c'est exactement ce dont vous avez besoin.

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

Toutes les réponses utilisent l'agent utilisateur pour détecter le navigateur, mais la détection de périphérique basée sur l'agent utilisateur n'est pas une très bonne solution, mieux vaut détecter des fonctionnalités telles que le périphérique tactile (dans le nouveau jQuery, elles sont supprimées $.browseret utilisées à la $.supportplace).

Pour détecter un mobile, vous pouvez vérifier les événements tactiles:

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

Tiré de Quelle est la meilleure façon de détecter un appareil à «écran tactile» en utilisant JavaScript?

Je proposerais d'utiliser la combinaison de chaînes suivante pour vérifier si le type d'appareil utilisé.

Conformément à la documentation de Mozilla, la chaîne Mobiest recommandée. Mais, certaines des anciennes tablettes ne retournent pas vrai si seulement Mobiest utilisé, donc nous devrions également utiliser la Tabletchaîne.

De même, pour être du bon côté iPad, des iPhonechaînes peuvent également être utilisées pour vérifier le type d'appareil.

La plupart des nouveaux appareils retournaient uniquement truepour la Mobichaîne.

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

Vous pouvez utiliser la requête multimédia pour pouvoir la gérer facilement.

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

Grande réponse merci. Petite amélioration pour prendre en charge Windows Phone et 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";
}

Utilisez ceci:

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

Ensuite, utilisez ceci:

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

Fonction simple basée sur 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 vous utilisez un navigateur et si vous essayez d'obtenir navigator.userAgent, nous obtiendrons les informations du navigateur comme suit

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

La même chose si vous faites dans le mobile, vous suivrez

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

Chaque navigateur mobile aura useragent avec une chaîne contenant "Mobile". J'utilise donc l'extrait ci-dessus dans mon code pour vérifier si l'agent utilisateur actuel est web / mobile. Sur la base du résultat, je ferai les changements requis.

J'utilise ceci

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

Que diriez-vous de mobiledetect.net ?

D'autres solutions semblent trop basiques. Il s'agit d'une classe PHP légère. Il utilise la chaîne User-Agent combinée à des en-têtes HTTP spécifiques pour détecter l'environnement mobile. Vous pouvez également bénéficier de Mobile Detect en utilisant l'un des plugins tiers disponibles pour: WordPress, Drupal, Joomla, Magento, etc.

Les chaînes d'agent utilisateur ne doivent pas être approuvées seules. La solution ci-dessous fonctionnera dans toutes les situations.

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

et appelez cette fonction:

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