Question Quel est le meilleur moyen de détecter un appareil mobile dans jQuery?


Existe-t-il un moyen fiable 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 de poche.

Le jQuery $.browser la fonction n'est pas ce que je cherche.


1362


origine


Réponses:


Au lieu d'utiliser jQuery, vous pouvez utiliser du JavaScript simple 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 à la fois pour le rendre plus accessible via jQuery ...

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

À présent $.browser reviendra "device" pour tous les appareils ci-dessus

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


Une version plus complète:

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

1732



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

En 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". Donc, j'utilise CSS Media Queries afficher / masquer les éléments en fonction de la taille de l'écran.

Par exemple, dans ma version mobile, je ne veux pas activer le Facebook Like Box, car il charge toutes ces images de profil et d'autres choses. Et ce n'est pas bon pour les visiteurs mobiles. Donc, en plus de cacher l'élément conteneur, je le fais aussi 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 travaille toujours sur la version mobile, donc ça ne regarde toujours pas comme il se doit, au moment d'écrire ça.

Mise à jour par dekin88

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

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

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

Supports 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 que vous pouvez cibler séparément différents périphériques tels que les smartphones et les tablettes, si nécessaire, sans avoir à ajouter d'éléments factices dans le DOM.


411



Selon Mozilla - Détection du navigateur en utilisant 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 périphérique mobile.

Comme ça:

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

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

Mise à jour pour Android

EricL recommande de tester pour Android en tant qu'agent d'utilisateur, en tant que Chaîne de l'agent utilisateur Chrome pour les tablettes ne comprend pas "Mobi" (les versions de téléphone font cependant):

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

176



Ce que vous faites en voulant détecter un appareil mobile devient un peu trop proche d'un concept de "reniflage de navigateur" IMO. Il serait probablement préférable de faire une détection de certaines fonctionnalités. Les bibliothèques aiment http://www.modernizr.com/ peut aider avec ça.

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


74



Un one-liner 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 fournis cette deuxième version, basée sur Solution @Julian:

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

72



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 cherchez.

Cependant, puisque vous utilisez jQuery, vous voudrez peut-être connaître la collection jQuery.support. C'est 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 de ces derniers sera le plus utile.

Cela étant dit, je pense que votre meilleur pari 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é serveur serait 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 :)


59



Parfois, il est souhaitable de savoir quel appareil de marque un client utilise pour afficher un contenu spécifique à cet appareil, comme un lien vers le magasin iPhone ou le marché Android. Modernizer est génial, mais montre seulement les capacités de votre navigateur, comme HTML5, ou Flash.

Voici ma solution UserAgent dans jQuery pour afficher une classe différente pour chaque type d'appareil:

/*** 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 vient de Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


45



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

39



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 allez vous retrouver avec un window.screen.width de 320. Sur Android vous allez vous retrouver avec un window.outerWidth de 480 (bien que cela puisse dépendre de l'Android). Les iPads et les tablettes Android renverront des chiffres comme le 768 afin qu'ils obtiennent la vue complète comme vous le souhaitez.


18



Si tu utilises Modernizr, il est très facile à utiliser Modernizr.touch comme mentionné précédemment.

Cependant, je préfère utiliser une combinaison de Modernizr.touch et test d'agent utilisateur, juste pour être sûr.

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 Modernizr.touch fonction ci-dessus avec ('ontouchstart' in document.documentElement)

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

Voir aussi cette question SO


14



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 la solution idéale, mais elle sera probablement la plus facile à détecter pour plusieurs appareils. Vous devrez peut-être en mettre un spécifique pour l'iPhone 4 (grande résolution).


10