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

Question

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

Le jQuery $.browser n'est pas ce que je recherche.

Answer 1

Note de l'éditeur : la détection de l'agent utilisateur n'est pas une technique recommandée pour les applications web modernes. Voir les commentaires sous cette réponse pour une confirmation de ce fait. Il est suggéré d'utiliser l'une des autres réponses utilisant la détection d'agent et/ou les requêtes média.

---

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 combiner les deux pour le rendre plus accessible grâce à jQuery...

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

Maintenant $.browser retournera "device" pour tous les dispositifs ci-dessus

Note : $.browser retiré le jQuery v1.9.1 . Mais vous pouvez l'utiliser en utilisant le plugin de migration jQuery. Code

---

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

Answer 2

Pour moi, le petit est beau, alors 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 que mon site soit "mobile-friendly". J'utilise donc les requêtes 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 case "J'aime" de Facebook, car elle charge toutes ces images de profil et autres. Et ce n'est pas bon pour les visiteurs mobiles. Donc, en plus de masquer l'élément conteneur, je le fais également dans le 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 à http://lisboaautentica.com

Je suis toujours en train de travailler sur la version mobile, donc elle n'a pas encore l'apparence qu'elle devrait avoir, au moment où j'écris ces lignes.

Mise à jour par dekin88

Il existe une API JavaScript intégrée pour la détection des 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
    }
 });

Navigateur pris en charge : http://caniuse.com/#feat=matchmedia

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

Answer 3

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

En résumé, nous 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 des navigateurs mobiles courants, notamment Mozilla, Safari, IE, Opera, Chrome, etc.

Mise à jour pour Android

EricL recommande de faire des tests pour Android en tant qu'agent utilisateur également, comme le Chaîne d'agent utilisateur de Chrome pour tablettes n'inclut pas "Mobi" (les versions pour téléphones le font cependant) :

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

Answer 4

Ce que vous faites en voulant détecter un appareil mobile se rapproche un peu trop du concept de "reniflage de navigateur", selon moi. Il serait probablement beaucoup mieux de faire de la détection de fonctionnalités. Des bibliothèques comme http://www.modernizr.com/ peut aider à cela.

Par exemple, où se situe la limite entre mobile et non-mobile ? Elle devient de plus en plus floue chaque jour.

Answer 5

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

Il fournit des scripts pour détecter les navigateurs mobiles dans plusieurs langages, dont le JavaScript. Cela peut vous aider à trouver ce que vous cherchez.

Toutefois, puisque vous utilisez jQuery, vous voudrez peut-être connaître la collection jQuery.support. Il s'agit d'une collection de propriétés permettant de détecter les capacités du navigateur actuel. La documentation est disponible ici : http://api.jquery.com/jQuery.support/

Comme je ne sais pas exactement ce que vous essayez d'accomplir, je ne sais pas lequel de ces éléments sera le plus utile.

Tout cela étant dit, je pense que votre meilleure chance est soit de rediriger ou d'écrire un script différent à la sortie en utilisant un langage côté serveur (si c'est une option). Puisque vous ne connaissez pas vraiment les capacités d'un navigateur mobile x, faire la détection, et la logique d'altération du côté du serveur serait la méthode la plus fiable. Bien sûr, tout cela est discutable si vous ne pouvez pas utiliser un langage côté serveur :)