Détection d'un navigateur mobile


889

Je recherche une fonction qui retourne une valeur booléenne si l'utilisateur a un navigateur mobile ou non.

Je sais que je peux utiliser navigator.userAgentet écrire cette fonction en utilisant l'expression régulière, mais les agents utilisateurs sont trop divers pour différentes plates-formes. Je doute que faire correspondre tous les appareils possibles soit facile, et je pense que ce problème a été résolu plusieurs fois, il devrait donc y avoir une sorte de solution complète pour une telle tâche.

Je regardais ce site , mais malheureusement, le script est si cryptique que je n'ai aucune idée de comment l'utiliser à mon but, qui est de créer une fonction qui retourne vrai / faux.




5
@Thrustmaster: Ce ne serait vraiment pas le cas. Servir différents JS à différents navigateurs signifie que vous devez ajouter Vary: User-Agentà votre réponse, sinon la mise en cache des proxys stockera une version et l'enverra à l'autre type de navigateur. Mais Vary: User-Agentrend la réponse inaccessible dans IE.
bobince

17
@ave: Qu'essayez-vous de faire en détectant un navigateur "mobile"? La distinction est hautement défendable dans le monde actuel des tablettes et des appareils informatiques hybrides. Cherchez-vous à détecter de petits écrans et à présenter une interface utilisateur différente dans ce cas? Cherchez-vous à détecter une connectivité à faible bande passante? Cherchez-vous à détecter des interfaces tactiles?
bobince

2
J'ai donc mis à jour ma réponse pour utiliser la méthode javascript de detectmobilebrowsers.com mais renvoyer une valeur booléenne si quelqu'un en a encore besoin. ( Au cas où ). Happy Detecting :)
Michael Zaporozhets

Réponses:


1318

Utilisation de Regex (sur detectmobilebrowsers.com ):

Voici une fonction qui utilise une expression régulière incroyablement longue et complète qui renvoie une valeur trueou falseselon que l'utilisateur navigue avec un mobile ou non.

window.mobileCheck = function() {
  let check = false;
  (function(a){if(/(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

Pour ceux qui souhaitent inclure des tablettes dans ce test (bien que sans doute, vous ne devriez pas), vous pouvez utiliser la fonction suivante:

window.mobileAndTabletCheck = function() {
  let check = false;
  (function(a){if(/(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|android|ipad|playbook|silk/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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

La réponse originale

Vous pouvez le faire en parcourant simplement une liste d'appareils et en vérifiant si cela useragentcorrespond à quelque chose comme ça:

  function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

Cependant, puisque vous pensez que cette méthode n'est pas fiable, vous pouvez supposer que tout appareil ayant une résolution de 800x600 ou moins est également un appareil mobile, ce qui réduit encore plus votre cible (bien que de nos jours, de nombreux appareils mobiles aient des résolutions beaucoup plus grandes que cela)

c'est à dire

  function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
  }

Référence:


25
Salut, je viens de visiter le lien detectmobilebrowsers.com sur mon iPad 3, iOS 6.1.2, et il dit "Aucun navigateur mobile détecté".
Richard Lovejoy

49
@RichardLovejoy lors de la construction de sites, l'ipad n'est généralement pas considéré comme un mobile.
Michael Zaporozhets

42
À partir de la page À propos : 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.
Gras Double

13
Google TV est également Android. Qu'est-ce qui définit un mobile? Taille de l'écran ? Toucher ? deviceOrientation? Quand je conçois c'est plus une question de survol de souris ou pas, gros bouton ou petits liens. Donc, pour l'instant, je cours avec "if (Modernizr.touch)" :)
molokoloco

31
Gawd, toute cette idée d'agents utilisateurs est horrible et doit vraiment, vraiment s'arrêter. Nous devons vraiment cesser de permettre aux clients de lutter contre la marée et rester fidèles aux requêtes des médias. S'ils veulent faire des redirections basées sur l'échelle pour des pages particulières, alors vérifiez simplement la portée d'une requête média particulière via JS, c'est-à-dire tylergaw.com/articles/reacting-to-media-queries-in-javascript
marksyzm

324

Que diriez-vous:

if (typeof window.orientation !== 'undefined') { ... }

... puisque les smartphones prennent généralement en charge cette propriété et les navigateurs de bureau ne le font pas.

EDIT: Comme l'a souligné @Gajus, cette solution est désormais obsolète et ne doit pas être utilisée ( https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation )


14
c'est en fait super unique et génial, ça vous dérange si je l'ajoute à ma réponse?
Michael Zaporozhets

77
Cela ne fonctionnera probablement pas longtemps. 1) Les tablettes peuvent avoir des tailles d'écran décentes, vous voulez qu'elles affichent un site Web de bureau complet, mais elles auront cette propriété 2) Windows 8 est là et avec lui un tas d'ordinateurs portables avec écran tactile et des écrans qui pivotent.
Dave Hilditch

10
Quant à votre premier point sur les tablettes avec des tailles d'écran décentes, je pense que vous pourriez également faire les mêmes arguments pour toutes les autres solutions (une tablette avec un grand écran qui est suivie comme un petit écran). Quoi qu'il en soit, l'idée ici est de rechercher une propriété partagée par de petits appareils au lieu de conserver un code long de maintenance et d'ajouter des expressions régulières à chaque nouveau périphérique / version / modèle à venir. Je pense que la détection des appareils appartient au passé et aujourd'hui, nous devons nous concentrer sur la détection des fonctionnalités. encore une fois, je serai heureux ici de propriété plus appropriée d'ailleurs
yoav barnea

2
Aimez-le et fonctionne parfaitement, merci. Pour ma solution, j'étais juste après simple.
Bojangles

40
window.orientationest une propriété obsolète ( developer.mozilla.org/en-US/docs/Web/API/Window/orientation , compat.spec.whatwg.org/#dom-window-orientation ) que certains navigateurs mobiles choisissent de prendre en charge pour des raisons inconnues . Les mêmes navigateurs implémentent window.screen.orientation(qui est également défini dans les navigateurs de bureau). Je peux seulement supposer qu'il window.orientationest laissé là pour des raisons héritées et ne doit donc pas être utilisé dans de nouvelles applications.
Gajus

115
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) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Comment utiliser

if( isMobile.any() ) alert('Mobile');

Pour vérifier si l'utilisateur se trouve sur un appareil mobile spécifique:

if( isMobile.iOS() ) alert('iOS');

Réf: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript

Version améliorée sur github: https://github.com/smali-kazmi/detect-mobile-browser


Pourquoi ne pas créer any()un for ... en boucle de isMobilemembres ORed ?
SomeShinyObject

@ChristopherW j'avais créé son plugin et modifié le code comme vous l'aviez conseillé
Mudaser Ali

2
Peut-être faire passer iOS avant BlackBerry () juste pour placer les cas les plus courants en premier et laisser le renflouement précoce économiser du traitement supplémentaire?
Rob_vH

2
@Rob_vH j'avais mis ce code dans github ( github.com/smali-kazmi/detect-mobile-browser ) avec quelques fonctionnalités avancées; vous pouvez également y envoyer des suggestions
Mudaser Ali

1
@AkarshSatija La baisse des performances de ces 5 vérifications d'expression régulière a-t-elle réellement un impact sur l'une de vos applications? Je serais très surpris si c'était le cas. L'optimisation prématurée peut être une perte de temps ...
trusktr

68

Voici une solution simple de la source de la fronde de facebook

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  /* your code here */
}

Agréable. Très utile dans certaines situations
Chuck Le Butt

Utile pour détecter un appareil sur lequel une application mobile pourrait être installée. Vous ne vous souciez pas du navigateur en soi. Juste l'appareil / OS.
Charlie Reitzel

31

Je suis venu ici à la recherche d'un moyen simple et propre de détecter les "appareils à écran tactile", que je classe comme mobiles et tablettes. N'a pas trouvé de choix correct dans les réponses actuelles, mais a élaboré les éléments suivants qui peuvent également aider quelqu'un.

var touchDevice = ('ontouchstart' in document.documentElement);

Modifier : pour prendre en charge les ordinateurs de bureau avec écran tactile et mobiles en même temps, vous pouvez utiliser les éléments suivants:

var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);

9
Que faire si le moniteur du bureau prend en charge le toucher?
Anton Kuzmin

@HappyCoder Je crois qu'il appartient au système d'exploitation de dire au navigateur lorsque l'écran tactile sur un bureau est actif. Donc, oui, cette vérification doit toujours être valide.
Tigger

(+1), cependant, mon bureau que j'utilise maintenant a un écran tactile, et il n'est pas toujours cohérent pour touchstart|end|etc.
Cody

1
Le sélecteur de date d'amorçage utilise les éléments suivants: if (window.navigator.msMaxTouchPoints || 'ontouchstart' dans le document) {this.input.blur (); }
JT Taylor

1
@JTTaylor Il semble que Microsoft recommande navigator.maxTouchPoints (pas de mspréfixe). Il y a aussi un article MDN à vérifier.
Tigger

20

Comme beaucoup l'ont déclaré, il est problématique de se fier à la cible mobile des données de l'agent utilisateur. La même chose peut être dite pour compter sur la taille de l'écran.

Mon approche est empruntée à une technique CSS pour déterminer si l'interface est tactile:

En utilisant uniquement javascript (prise en charge par tous les navigateurs modernes), une correspondance de requête multimédia peut facilement déduire si l'appareil est mobile .

function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if(match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}

6
Qu'en est-il des ordinateurs portables avec écrans tactiles?
Maxim

6
Je vérifierais! MatchMedia ("(n'importe quel pointeur: très bien)"). Me correspond. ("Pas de souris branchée", plutôt que "a un écran tactile".
Sora2455

Cela fonctionne alors que mon dernier script serait trompé par les personnes utilisant la fonction de zoom du navigateur (par exemple, un gars avec qui je parlais sur un écran de 13 "avec 4K qui est passé à 1080p et devait encore utiliser le zoom). Travaillé sur mon iPhone (Safari / Firefox) et les appareils Android (Waterfox / Chrome / "Navigateur"). Certainement beaucoup plus fiable que toutes les réponses les mieux notées .
John

ne détecte pas FireFox fennec sur un Android pour lequel j'ai complété avec navigator.userAgent.toLowerCase (). indexOf ('fennec')> -1 (peut-être pas le meilleur supplément ..)
StayCool

2
De plus, vous pouvez tester la propriété de survol: pour les smartphones et les écrans tactiles @media (survol: aucun) et (pointeur: grossier)
Batailley

16

Selon l'article de MDN sur la détection de navigateur à l'aide de l'agent utilisateur , il est encouragé d'éviter cette approche si possible et de suggérer d'autres voies telles que la détection de fonctionnalités.

Cependant, si l'on doit utiliser l'agent utilisateur comme moyen de détecter si l'appareil est mobile, ils suggèrent:

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.

Par conséquent, cette doublure suffira:

const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");

[MISE À JOUR]:

Comme @ zenw0lf le suggère dans les commentaires, l'utilisation d'une expression régulière serait préférable:

const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)


.includespas sopport par IE-11
Pasha Oleynik

1
@PashaOleynik un polyfill peut résoudre ce problème
Maxim

La tablette Nexus 7 avec Android n'a pas Mobiledans la chaîne d'agent utilisateur
Alex Sorokoletov

@AlexSorokoletov Aussi pour l'article MDNIf the device is large enough that it's not marked with “Mobi”, you should serve your desktop site (which, as a best practice, should support touch input anyway, as more desktop machines are appearing with touchscreens).
TheDarkIn1978

1
Je pense que cela fonctionnerait n'importe où sans polyfills: const isMobile = /Mobi/.test(window.navigator.userAgent)
zenw0lf

14

Il n'y a pas de solution parfaite pour détecter si le code JS est exécuté sur un navigateur mobile, mais les deux options suivantes devraient fonctionner dans la plupart des cas.

Option 1: reniflement du navigateur

!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);

alert(isMobile.any ? 'Mobile' : 'Not mobile');

Ce code renifleur de navigateur particulier est celui d' une bibliothèque appelée isMobile .


Option 2: fenêtre.orientation

Testez si window.orientationest défini:

var isMobile = window.orientation > -1;
alert(isMobile ? 'Mobile' : 'Not mobile');


Remarque

Tous les appareils à écran tactile ne sont pas mobiles et vice versa. Donc, si vous souhaitez implémenter quelque chose spécifiquement pour l'écran tactile, vous ne devriez pas tester si votre navigateur est exécuté sur un appareil mobile mais plutôt si les appareils prennent en charge l'écran tactile:

var hasTouchscreen = 'ontouchstart' in window;
alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen');


L'approche d'orientation est vraiment sympa! ))
Maxim

1
J'aime votre window.orientationsolution, mais les docs disent qu'elle est obsolète! developer.mozilla.org/en-US/docs/Web/API/Window/orientation
skwidbreth

3
L'approche d'orientation n'est PAS agréable car Windows 8 et supérieur peut changer d'orientation.
Heitor

Windows 8 et les versions plus récentes se concentrent sur l'ajout de la prise en charge des mobiles mais également des hybrides (ordinateurs portables qui peuvent se convertir en gros pads), c'est pourquoi l'orientation échoue en tant que méthode de détection même si moz ne s'y référait pas comme obsolète.
Jeff Clayton

C'est à partir de Win 7 avec le logiciel graphique installé peut changer d'orientation mais posez-vous une question, qui peut sur un ordinateur de bureau / portable utiliser une autre orientation d'écran comme Portrait au lieu de Paysage et utiliser i pendant encore plus d'une minute. Personne !!! Changer l'orientation sur le bureau signifie que vous commencerez à lire les caractères sur votre écran de bas en haut.
GirlCode

11

Voici une solution userAgent plus efficace que match ...

function _isMobile(){
    // if we want a more complete list use this: http://detectmobilebrowsers.com/
    // str.test() is more efficent than str.match()
    // remember str.test is case sensitive
    var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
         (navigator.userAgent.toLowerCase());
    return isMobile;
}

7
la méthode de test n'est pas sensible à la casse, mais votre expression régulière l'est. vous pouvez simplement signaler une expression rationnelle insensible à la casse avec un "i" à la fin et faire/iphone|etc/i.test(navigator.userAgent)
xec

11

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
    var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile']; 
    for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;

    // nothing found.. assume desktop
    return false;
}

3
Je n'ai pas encore testé sur mobile, mais sessionStorage.desktopn'existe pas dans Safari, Chrome ou Firefox (toutes les dernières versions au moment de la publication). Vous obtenez un vote positif, car votre solution va dans une meilleure direction que les autres. Mais n'oubliez pas d'utiliser à la var mobile =place de mobile =.
shuckster

3
Aussi une bonne idée de ne pas utiliser indexOf avec des navigateurs plus anciens qui ne prennent pas en charge cette méthode, ou d'utiliser un polyfill. Il n'est pas nécessaire d'utiliser toLowerCase sur une liste de valeurs en minuscules, ni de le faire si vous exécutez /ipad|iphone|etc/i.test(navigator.userAgent) au lieu de la boucle lente que vous avez là-haut.
Jeffrey Gilbert

10

La détection des fonctionnalités est bien meilleure que d'essayer de déterminer sur quel appareil vous êtes et très difficile de suivre les nouveaux appareils qui sortent tout le temps, une bibliothèque comme Modernizr vous permet de savoir si une fonctionnalité particulière est disponible ou non.


18
Vous avez répondu à une autre question que celle qui vous a été posée. Plutôt que "comment puis-je détecter les mobiles?", Vous avez répondu "comment puis-je détecter certaines fonctionnalités?". La détection de tous les appareils n'est pas destinée à la détection de fonctionnalités. Et si nous cherchions à obtenir des statistiques sur les appareils? Alors non, la "détection des fonctionnalités" n'est pas "bien meilleure que [déterminer le périphérique]".
Jonathan Allard

1
Ce n'est pas la réponse, mais elle mérite plus qu'un simple commentaire. La question est: pourquoi voulez-vous détecter un navigateur et alors vous voudrez probablement le connaître à cause du (manque de) toucher uniquement. Le webdesign réactif suffit dans la plupart sinon tous les cas.
2

8

Que diriez-vous quelque chose comme ça?

if(
    (screen.width <= 640) || 
    (window.matchMedia && 
     window.matchMedia('only screen and (max-width: 640px)').matches
    )
  ){
   // Do the mobile thing
}

Pourquoi ne pas simplement utiliser à la screen.widthplace? Il me semble que c'est plus fiable que window.matchMedia.
John Slegers

Bon point John, je ne me souviens pas exactement de ce que je pensais à l'époque, il semble peu probable (en le regardant maintenant) que la deuxième clause retourne vraie si la première est fausse. Il doit y avoir une raison pour laquelle je l'ai ajouté.
stujo

La plupart des programmeurs décents ont honte lorsqu'ils voient du code qu'ils ont écrit eux-mêmes un an plus tôt. Ceux qui n'ont pas simplement évolué en tant que programmeurs ;-)
John Slegers

4
La résolution de la fenêtre n'a rien à voir avec le fait qu'un navigateur soit sur un appareil mobile ou non. Par exemple, de nombreux navigateurs de bureau s'exécutent dans des fenêtres non plein écran. Si vous présentez une interface utilisateur conçue pour les écrans portables à ces navigateurs, leurs utilisateurs vont vivre une expérience frustrante.
ʇsәɹoɈ

1
@JohnSlegers - J'ai surtout honte de googler une question et de trouver ma propre réponse sur stackoverflow. encore et encore. Je suis moi-même dans un débordement de pile constant
vsync

7

Une fois que l'élément gagne en concentration, vous le brouillez immédiatement. Bootstrap-datepicker, qui est un composant très populaire et bien entretenu avec près de 10 000 étoiles dans GitHub, utilise cette approche:

if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
    this.input.blur();
}

https://github.com/uxsolutions/bootstrap-datepicker

Merci à Tigger pour son aide.


7

Un très bon moyen de détecter les appareils mobiles ou tablettes consiste à vérifier si le navigateur peut créer un événement tactile.

Code JavaScript simple:

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

if (isMobile()) {
   # do whatever you wanna do!
}

Cela a très bien fonctionné pour moi, mais il peut y avoir un problème avec les appareils portables qui incluent un écran tactile.

Je ne sais pas si un ordinateur portable à écran tactile sera détecté comme un appareil mobile car je ne l'ai pas encore testé.


5
Les ordinateurs portables à écran tactile seront détectés en tant qu'appareil mobile. Ainsi que des moniteurs à écran tactile pour ordinateurs de bureau. Croyez-le ou non, vous rencontrerez également un problème si vous utilisez un appareil à écran tactile pour RDP dans un autre appareil qui n'a pas d'écran tactile.
blissfool

@blissfool je suppose que ce ne sera pas la bonne façon de détecter les appareils mobiles.
Neo Morina

Malheureusement non. Mais, cela pourrait encore être une option viable pour un cas d'utilisation très limité.
blissfool

ne jamais écrire de code, qui est basé sur une exception, qui sera jeté à coup sûr en tout cas ...
Pablo

@Sivic, il n'est lancé que lorsqu'un TouchEvent n'existe pas et que le code ci-dessus l'attrape et renvoie faux. Ce n'est pas le cas sur les mobiles ou tablettes ou autres appareils à écran tactile.
Neo Morina

5

Voici ma solution repensée pour le problème. Toujours pas parfait. La seule vraie solution serait que les fabricants d'appareils commencent à prendre au sérieux les chaînes d'agent utilisateur "Mobile" et "Tablette".

window.onload = userAgentDetect;
function userAgentDetect() {
  if(window.navigator.userAgent.match(/Mobile/i)
  || window.navigator.userAgent.match(/iPhone/i)
  || window.navigator.userAgent.match(/iPod/i)
  || window.navigator.userAgent.match(/IEMobile/i)
  || window.navigator.userAgent.match(/Windows Phone/i)
  || window.navigator.userAgent.match(/Android/i)
  || window.navigator.userAgent.match(/BlackBerry/i)
  || window.navigator.userAgent.match(/webOS/i)) {
    document.body.className += ' mobile';
    alert('True - Mobile - ' + navigator.userAgent);
  } else {
    alert('False - Mobile - ' + navigator.userAgent);
  }
  if(window.navigator.userAgent.match(/Tablet/i)
  || window.navigator.userAgent.match(/iPad/i)
  || window.navigator.userAgent.match(/Nexus 7/i)
  || window.navigator.userAgent.match(/Nexus 10/i)
  || window.navigator.userAgent.match(/KFAPWI/i)) {
    document.body.className -= ' mobile';
    document.body.className += ' tablet';
    alert('True - Tablet - ' + navigator.userAgent);
  } else {
    alert('False - Tablet - ' + navigator.userAgent);
  }
}

Que se passe-t-il lorsque la tablette Nexus 7 n'a que la chaîne Android UA? Tout d'abord, le mobile devient vrai, puis la tablette devient également vraie, mais la tablette supprimera la chaîne Mobile UA de la balise body.

CSS:

body.tablet { background-color: green; }
body.mobile { background-color: red; }

alertlignes ajoutées pour le développement. La console Chrome peut émuler de nombreux appareils portables. Testez-le.

ÉDITER:

Ne l'utilisez pas, utilisez plutôt la détection des fonctionnalités. Il y a tellement d'appareils et de marques que cibler une marque ne sera JAMAIS la bonne solution.


4

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

En bref, si vous importez un petit fichier JS:

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

il vous restera un objet JSON qui ressemble à:

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

(c'est en supposant que vous utilisez un Nexus 7, bien sûr) et vous pourrez faire des choses comme:

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

Voilà ce que vous recherchez.

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


1
Et comment cela ne reconnaît-il pas le safari sur iphone?
Amyth

Pouvez-vous développer le navigateur que vous utilisez (la chaîne UA exacte serait parfaite), les données que vous obtenez et ce que vous attendez?
Luca Passani

J'ai aussi essayé wurfl, je suis sur un iPhone 5C sous IOS 11.2. Il ne reconnaît pas Safari comme un navigateur mobile. Je m'attends à utiliser "is_mobile": true puis "form_factor": Smartphone et ce n'est pas de retour non plus.
Mike Wells

J'ai dû me tourner vers les gourous des données mobiles de l'entreprise et ils m'ont dit que OS 11.2 ne fonctionne pas sur le 5C. L'appareil le plus bas est le 5S. Donc, quelque chose ne va pas dans ce que vous avez écrit. N'hésitez pas à contacter ScientiaMobile hors ligne pour vérifier où se situe la déconnexion. Merci
Luca Passani

4

voici un one liner

function isMobile() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};

3

Dépend du cas d'utilisation. Tous les appareils mobiles nécessitent une batterie. Si vous cherchez à calculer la puissance sans vider la batterie, utilisez l' API d'état de la batterie :

navigator.getBattery().then(battery => {
  battery.charging ? 'charging' : 'not charging';
});

Si ce que vous recherchez est une utilisation de présentation matchMedia, qui renvoie une valeur booléenne:

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Ou combinez-les pour une expérience utilisateur encore meilleure sur les tablettes.


Notez que l'API Battery Status est supprimée des navigateurs.
Sora2455

L'API d'état de la batterie a été supprimée de Firefox mais reste une recommandation candidate du W3C depuis juillet 2016 , continue de fonctionner dans les navigateurs populaires et est utile pour façonner l'expérience.
Josh Habdas

2

Voici une solution ECMAScript 6 (prête pour TypeScript)

public isMobile(): boolean {
  let check = false;
  ((a => {
      if (/(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))) check = true;
      }))(navigator.userAgent || navigator.vendor);
  return check;
 }

pourquoi ne pas simplement retourner la ifcondition au lieu d'avoir toute cette checkvariable?
Vic

2

Il existe une astuce simple pour détecter s'il s'agit d'un appareil mobile ou non. Vérifiez simplement si l' événement ontouchstart existe:

function isMobile()
{
    return "ontouchstart" in window;
}

3
Ne fonctionne pas avec les ordinateurs portables et les ordinateurs de bureau avec écrans tactiles. Il y aura également un problème avec les PC hybrides comme Surface. Moins de problème avec les ordinateurs de bureau, mais il y a plus d'ordinateurs portables à écran tactile vendus ces jours-ci.
blissfool

2

J'ai fait face à certains scénarios où les réponses ci-dessus ne fonctionnaient pas pour moi. J'ai donc trouvé ça. Pourrait être utile à quelqu'un.

if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
 || screen.availWidth < 480){
//code for mobile
}

Cela dépend de votre cas d'utilisation. Si vous vous concentrez sur l'utilisation de l'écran screen.availWidth, ou vous pouvez utiliser document.body.clientWidthsi vous souhaitez effectuer un rendu basé sur le document.


1

Le meilleur doit être:

var isMobile = (/Mobile/i.test(navigator.userAgent));

Mais comme le dit Yoav Barnea ...

// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;

Après ces 3 tests, j'espère que var isMobile est ... ok


> Firefox mobile sur Android ne semble pas avoir "d'orientation" dans la fenêtre "
molokoloco

1
Désolé .. ok pour moi ça marche bien comme ça maintenant. "si (Modernizr.touch) / * ... * /" et continuez ...
molokoloco

Je me demandais simplement comment Modernizr.touch fonctionnerait sur un appareil de bureau à écran tactile.
B2K

Pour le rendre plus élégant, vous devez créer tout le code dans un seul bloc if-else if-else if.
Heitor

1

Voici la fonction complète

function isMobile(){
    return (/(android|bb\d+|meego).+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|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/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||navigator.vendor||window.opera).substr(0,4)))
}

jQuery.noConflict();
jQuery(document).ready(function(){
    if(isMobile()) alert("Mobile"); else alert("Not Mobile");
});

.substr (0,4) renvoie les 4 premières lettres. Comment détecte-t-il "android. + Mobile"?
raacer

1
@raacer il y a en fait deux expressions rationnelles dans la réponse (les deux sur la même ligne) - la première vérifie par rapport à la chaîne UA entière, et recherche Android, mobile, etc., tandis que la seconde vérifie uniquement les 4 premiers caractères de l'UA .
JackW

1
//true / false
function isMobile()
{
   return (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ); 
}

vous pouvez également suivre ce tutoriel pour détecter un mobile spécifique. Cliquez ici .


Veuillez ajouter Mobileà votre RX
oriadam

1

qu'en est-il de l'utilisation de "window.screen.width"?

if (window.screen.width < 800) {
// do something
}

ou

if($(window).width() < 800) {
//do something
}

Je suppose que c'est le meilleur moyen car il y a un nouvel appareil mobile tous les jours!

(même si je pense que ce n'est pas pris en charge par les anciens navigateurs, mais essayez :))


1
Qu'en est-il du paysage?
Erick Voodoo

1
Ce n'est pas très utile pour certains scénarios. Si le navigateur de bureau est redimensionné, il peut ne pas être détecté correctement en tant que navigateur mobile
toing_toing

Un PC est essentiellement différent des appareils mobiles sur la convivialité, réponse horrible !!
Heitor

1

Notez que la plupart des appareils mobiles de nouvelle génération ont désormais des résolutions supérieures à 600x400. c'est à dire, un iPhone 6 ....

Preuve de test: a exécuté les articles les plus votés et les plus récents ici, avec une vérification facultative une fois exécutée comme suit:

(function(a){
    window.isMobile = (/(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)))
})(navigator.userAgent||navigator.vendor||window.opera);

alert("This browser was found to be a % browser.", window.isMobile ? 'mobile' : 'desktop');

D'une manière ou d'une autre, les résultats suivants ont été renvoyés sur les applications de navigateur suivantes. Spécifications: iPhone 6S, iOS 10.3.1.

Safari (dernier): détecté en tant que mobile.

Chrome (dernier): ne l'a pas détecté en tant que mobile.

SO, j'ai ensuite testé la suggestion de Lanti ( https://stackoverflow.com/a/31864119/7183483 ), et elle a renvoyé les bons résultats (mobile pour tous les appareils iOS et bureau pour mon Mac). Par conséquent, j'ai procédé à un peu de modification car il se déclencherait deux fois (pour mobile et tablette). J'ai ensuite remarqué lors des tests sur un iPad, qu'il est également revenu en tant que mobile, ce qui est logique, car les paramètres que Lantiutilise plus que tout le système d'exploitation. Par conséquent, j'ai simplement déplacé la déclaration IF de la tablette à l'intérieur du chèque mobile, qui retournerait mobile si le chèque de la tablette était négatif, et la tablette sinon. J'ai ensuite ajouté la clause else pour que le chèque mobile revienne en tant qu'ordinateur de bureau / ordinateur portable, car les deux sont admissibles, mais j'ai remarqué que le navigateur détecte la marque du processeur et du système d'exploitation. J'ai donc ajouté ce qui est retourné là-dedans dans le cadre de l'instruction else if à la place. Pour couronner le tout, j'ai ajouté une mise en garde sinon au cas où rien n'aurait été détecté. Voir ci-dessous, sera bientôt mis à jour avec un test sur un PC Windows 10.

Oh, et j'ai également ajouté une variable 'debugMode', pour basculer facilement entre le débogage et la compilation normale.

Avertissement: Plein crédit à Lanti , également que cela n'a pas été testé sur les tablettes Windows ... qui pourraient renvoyer un ordinateur de bureau / portable, car le système d'exploitation est Windows pur. Vérifie une fois que je trouve un ami qui en utilise un.

function userAgentDetect() {
    let debugMode = true;
    if(window.navigator.userAgent.match(/Mobile/i)
        || window.navigator.userAgent.match(/iPhone/i)
        || window.navigator.userAgent.match(/iPod/i)
        || window.navigator.userAgent.match(/IEMobile/i)
        || window.navigator.userAgent.match(/Windows Phone/i)
        || window.navigator.userAgent.match(/Android/i)
        || window.navigator.userAgent.match(/BlackBerry/i)
        || window.navigator.userAgent.match(/webOS/i)) {
        if (window.navigator.userAgent.match(/Tablet/i)
            || window.navigator.userAgent.match(/iPad/i)
            || window.navigator.userAgent.match(/Nexus 7/i)
            || window.navigator.userAgent.match(/Nexus 10/i)
            || window.navigator.userAgent.match(/KFAPWI/i)) {
            window.deviceTypeVar = 'tablet';
            if (debugMode === true) {
                alert('Device is a tablet - ' + navigator.userAgent);
            }
        } else {
            if (debugMode === true) {
                alert('Device is a smartphone - ' + navigator.userAgent);
            };
            window.deviceTypeVar = 'smartphone';
        }
    } else if (window.navigator.userAgent.match(/Intel Mac/i)) {
        if (debugMode === true) {
            alert('Device is a desktop or laptop- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'desktop_or_laptop';
    } else if (window.navigator.userAgent.match(/Nexus 7/i)
        || window.navigator.userAgent.match(/Nexus 10/i)
        || window.navigator.userAgent.match(/KFAPWI/i)) {
        window.deviceTypeVar = 'tablet';
        if (debugMode === true) {
            alert('Device is a tablet - ' + navigator.userAgent);
        }
    } else {
        if (debugMode === true) {
            alert('Device is unknown- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'Unknown';
    }
}

1

Ce n'est qu'un port es6 de la réponse acceptée que j'utilise dans mon projet. Notez que cela inclut également les tablettes.

export const isMobile = () => {
  const vendor = 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|xda|xiino|android|ipad|playbook|silk/i.test(
      vendor
    ) ||
    /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(
      vendor.substr(0, 4)
    )
  );
};

1

return 'ontouchstart' in window && window.screen.availWidth < 768

Que diriez-vous de cela, il développe la réponse ci-dessus mais vérifie également la taille de l'écran


1

Utilisation de Regex (sur detectmobilebrowsers.com ):

/* eslint-disable */
export const IS_MOBILE = (function (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)
      )
  )
  // @ts-ignore
})(navigator.userAgent || navigator.vendor || window.opera)
/* eslint-enable */

0

Cela pourrait également être une solution.

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;

  console.log('Mobile device:'+isMobile);

  var doc_h = $(document).height(); // returns height of HTML document
  var doc_w = $(document).width(); // returns width of HTML document
  console.log('Height: '+doc_h);
  console.log('width: '+doc_w);

  var iPadVertical = window.matchMedia("(width: 768px) and (height: 1024px) and (orientation: portrait)");
  var iPadHoricontal = window.matchMedia("(width: 1024px) and (height: 767px) and (orientation: landscape)");

  console.log('Height: '+doc_h);
  console.log('width: '+doc_w);

  if (iPadVertical.matches) {
      console.log('Ipad vertical detected');
  }else if (iPadHoricontal.matches){
      console.log('Ipad horicontal detected');
  }else {
      console.log('No Ipad');
  }

Si vous utilisez les deux méthodes, vous obtiendrez un moyen parfait de détecter différents appareils.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.