Comment détecter un appareil mobile avec JavaScript?

J'ai été invité à créer une réelle page HTML /JavaScript pour simuler la détection des périphériques mobiles (iPhone /iPad /Android) à l'aide de code JavaScript. Ce sera ensuite prendre l'utilisateur pour un autre écran qui vous demande de leur adresse e-mail.

InformationsquelleAutor Jeevs | 2011-07-12
  1. 74

    Je sais que cette réponse est venue 3 ans de retard mais aucun d'autres réponses sont en effet 100% de réponses correctes. Si vous souhaitez détecter si l'utilisateur est sur TOUT type d'appareil mobile (Android, iOS, BlackBerry, Windows Phone, Kindle, etc.), ensuite, vous pouvez utiliser le code suivant:

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
    //Take the user to a different screen here.
}
    • Je voudrais ajouter le mot clé "Mobile" ainsi.
    • avez-vous besoin d'une bibliothèque de quelque sorte? Je doute de plus simple.
    InformationsquelleAutor Baraa
  2. 26

    Vous permettrait de détecter le requérant navigateurs chaîne de l'agent utilisateur, et ensuite décider en fonction de ce qu'elle est si elle est à venir à partir d'un navigateur mobile ou pas. Cet appareil n'est pas parfait et ne le sera jamais en raison du fait que les agents utilisateurs ne sont pas normalisés pour les appareils mobiles (au moins pas à ma connaissance).

    Ce site va vous aider à créer le code: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

    Exemple:

    Vous pourriez obtenir de l'agent utilisateur en javascript en faisant ceci:

    var uagent = navigator.userAgent.toLowerCase();

    Et ensuite faire le chèque est dans le même format que ce (juste en utilisant l'iPhone comme un exemple rapide, mais d'autres devraient être un peu différent)

    function DetectIphone()
{
   if (uagent.search("iphone") > -1)
      alert('true');
   else
      alert('false');
}

    Modifier

    Vous pouvez ainsi créer une simple page HTML comme ceci:

    <html>
    <head>
        <title>Mobile Detection</title>
    </head>
    <body>
        <input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
    </body>
</html>
<script>
    function DetectIphone()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1)
          alert('true');
       else
          alert('false');
    }
</script>
    • Mais je me demande ce que serait commencer? Créer une page web factice et embedd ce codage là. C'est le code html que nous allons utiliser, parce que comme je l'ai mentionné dans mon code ci-dessus, je n'ai rien pour commencer.
    • Vérifier mon montage qui devrait vous obtenir a commencé.
    • Super!!!! Merci pour cela. Comment rediriger vers une autre page. Pensez-vous à quelque chose comme ça aiderait? if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i))) { if (document.cookie.indexOf("iphone_redirect=false") == -1) de la fenêtre.emplacement = "m.espn.go.com/wireless/?iphone&i=COMR";
    • Sûr, ça allait 🙂
    • N'oubliez pas que les agents utilisateurs peuvent être modifiés, falsifiés et peuvent ne pas refléter l'état actuel du navigateur. Cela étant dit, si un client parodies/modifications de leurs Clients et ils vous le mauvais affichage de la vue, c'est de leur propre faute. Il existe d'autres moyens autres que de pur agent utilisateur bien que l'agent de l'utilisateur est généralement de la racine de l'ensemble de détection. Il est vraiment bon (même périmée) exemple ici github.com/ahand/mobileesp?files=1
    • Smart - jamais pensé à ça 😀

    InformationsquelleAutor slandau
  3. 20

    Une jolie solution simple est de vérifier pour la largeur de l'écran. Depuis presque tous les appareils mobiles ont un max largeur de l'écran de 480px (à l'heure actuelle), c'est assez fiable:

    if( screen.width <= 480 ) {
    location.href = '/mobile.html';
}

    La chaîne de l'agent utilisateur est également un endroit à regarder. Cependant, la première solution est encore mieux car même si certains flipper périphérique ne répond pas correctement pour que le user-agent, la largeur de l'écran ne ment pas.

    La seule exception ici sont tablette comme l'ipad. Ces appareils ont une plus grande largeur de l'écran de smartphones et je serais probablement aller avec le user-agent-string pour ceux.

    • Droite!!!! J'ai seulement besoin de détecter iPhone ou Android. Donc il ne devrait pas être un problème, mais juste pour vous dire que je n'ai absolument rien pour commencer. Dois-je créer une Page web factice et embedd ce! Aussi comment serait la détection être vérifié? Aurais-je besoin de transférer le script à un téléphone?
    • Mon, comment les largeurs d'écran ont changé 😉
    InformationsquelleAutor jAndy
  4. 14
    if(navigator.userAgent.match(/iPad/i)){
 //code for iPad here 
}

if(navigator.userAgent.match(/iPhone/i)){
 //code for iPhone here 
}


if(navigator.userAgent.match(/Android/i)){
 //code for Android here 
}



if(navigator.userAgent.match(/BlackBerry/i)){
 //code for BlackBerry here 
}


if(navigator.userAgent.match(/webOS/i)){
 //code for webOS here 
}
    • c'est la meilleure et la plus propre solution
    • Même si ce code ne sera pas exécuté plus d'un bloc, puisque c'est de vérifier une chose, encore et encore, ce code doit utiliser d'autre-si les blocs à cause de cette raison. Aussi, si l'utilisateur de l'agent de modification de la variable en quelque sorte entre les deux blocs? Il va les exécuter plus de 1 pâté de maisons, ici.
    • Vous avez raison ,et n'oubliez pas que le code était il y a 4 ans 🙂 et il y a maintenant de meilleurs outils ou les moyens de faire le même travail
    InformationsquelleAutor Ahmed Abu Eldahab
  5. 8
    var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;
    • +1 pour l'expression rationnelle correspondant permettant aux utilisateurs de facilement vérifier plusieurs appareils en un seul coup. Cependant, je voudrais ajouter, pour plus de clarté que parce que vous dénoter /i à la fin de la regex pour le match insensible il n'y a vraiment pas besoin de chameau cas, la recherche params. La suivante serait l'équivalent (et aussi de la recherche pour les appareils android): .match(/ipad|iphone|ipod|android/i)
    InformationsquelleAutor kolypto
  6. 6

    Une solution simple pourrait être de css uniquement. Vous pouvez définir les styles dans votre feuille de style, puis réglez-les sur le fond de celui-ci. Les smartphones modernes agir comme ils sont juste 480px de large, alors qu'ils sont en réalité beaucoup plus. Le code pour détecter un écran de petite taille dans le css est

    @media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px)  {
    #hoofdcollumn {margin: 10px 5%; width:90%}
}

    Espérons que cette aide!

    InformationsquelleAutor Ivotje50
  7. 5

    Puisqu'il est maintenant en 2015, si vous avez trébuché à travers cette question, alors vous devriez probablement utiliser des de la fenêtre.matchMedia (et, si elle est encore en 2015, polyfills destinés à la prise pour les anciens navigateurs):

    if (matchMedia('handheld').matches) {
    //...
} else {
    //...
}
    • Cela n'a pas fonctionné pour moi sur un Nexus 5 lancement de Firefox.
    • Remarque à partir de SOCIÉTÉ Note: CSS2.1 et les Requêtes de Média 3 défini de plusieurs autres types de médias (ats, tv, projection, ordinateur de poche, en braille, en relief, phonétique), mais ils ont été désapprouvées dans les Media Queries 4 et ne doit pas être utilisé.
    • Voir ma réponse ci-dessous, pour une raison quelconque ordinateur de poche ne fonctionne pas pour moi non plus.
    InformationsquelleAutor Chris Devereux
  8. 4

    - Je utiliser mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)

    InformationsquelleAutor individuo7
  9. 4

    J'ai donc fait cela. Merci à vous tous!

    <head>
<script type="text/javascript">
    function DetectTheThing()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1 
       || uagent.search("android") > -1 || uagent.search("blackberry") > -1
       || uagent.search("webos") > -1)
          window.location.href ="otherindex.html";
    }
</script>

</head>

<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>

</html>
    InformationsquelleAutor CSepúlveda
  10. 3

    Vous pouvez utiliser la chaîne de l'agent utilisateur pour détecter cette.

    var useragent = navigator.userAgent.toLowerCase();

if( useragent.search("iphone") )
    ; //iphone
else if( useragent.search("ipod") )
    ; //ipod
else if( useragent.search("android") )
    ; //android
etc

    Vous pouvez trouver une liste des useragent cordes ici http://www.useragentstring.com/pages/useragentstring.php

    InformationsquelleAutor tskuzzy
  11. 3

    Je vous conseille de vérifier http://wurfl.io/

    En un mot, si vous importez un petit fichier JS:

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

    vous serez à gauche avec un objet JSON qui ressemble à:

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

    (c'est en supposant que vous utilisez une Nexus 7, bien sûr) et vous serez en mesure de faire des choses comme:

    WURFL.complete_device_name

    C'est ce que vous cherchez.

    Disclaimer: je travaille pour la société qui propose ce service gratuitement. Merci.

    • "Vous pouvez utiliser ces services gratuitement, aussi longtemps que votre site web est accessible au public et ne nécessite pas de frais ou abonnement payant à l'accès." -web.wurfl.io/#wurfl-js
    InformationsquelleAutor Luca Passani
  12. 2

    Ceci est un exemple de la façon de vérifier si la page web est chargée dans le Bureau ou une application mobile.

    JS va exécuter au chargement de la page et vous pouvez le faire Desktop choses spécifiques au chargement de la page par exemple cacher scanner de code à barres.

       <!DOCTYPE html>
    <html>
    <head>
     <script type="text/javascript">

            /*
            * Hide Scan button if Page is loaded in Desktop Browser
            */
            function hideScanButtonForDesktop() {

                if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {

                    //Hide scan button for Desktop
                    document.getElementById('btnLinkModelScan').style.display = "none";
                }         
            }

            //toggle scanButton for Desktop on page load
            window.onload = hideScanButtonForDesktop;
        </script>
    </head>
    InformationsquelleAutor Hitesh Sahu
  13. 1

    Déterminer ce que l'Utilisateur Agent pour les périphériques que vous avez besoin de simuler et de tester ensuite une variable contre.

    par exemple:

    //var userAgent = navigator.userAgent.toLowerCase(); //this would actually get the user agent

var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf('iphone') != -1) {
   //some code here
}
    • Vous ne voulez SIMULER la détection de ces dispositifs, à droite?
    • !!~userAgent.indexOf('iphone') // >> true|false
    InformationsquelleAutor Inversus
  14. 0

    C'est ma version, tout à fait analogue à la supérieure, mais je pense bon pour référence.

    if (mob_url == "") {
  lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") {
  lt_url = mob_url;
} else {
  lt_url = desk_url;
}
    InformationsquelleAutor Parker LAU
  15. 0

    Dispositif de détection basé sur l'agent utilisateur n'est pas très bonne solution, le mieux est de détecter des fonctionnalités comme le toucher de l'appareil (dans les nouveaux jQuery ils enlèvent $.browser et l'utilisation $.support à la place).

    Pour détecter 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
}

    Prises de Quel est le meilleur moyen de détecter un écran tactile de l'appareil " à l'aide de JavaScript?

    • En bas de vote parce que l'OP demande pour l'appareil mobile. Avec l'écran tactile ordinateurs portables de nos jours, la Touche de l'Appareil " n'est pas une très bonne solution.
    InformationsquelleAutor jcubic
  16. 0

    Simplement utiliser DeviceDetection

    deviceDetection.deviceType //phone | tablet according to device
    InformationsquelleAutor Manjesh V
  17. 0

    Une autre possibilité est d'utiliser mobile-detect.js. Essayez le démo.

    L'utilisation du navigateur:

    <script src="mobile-detect.js"></script>
<script>
    var md = new MobileDetect(window.navigator.userAgent);
    //... see below
</script>

    Node.js /Express:

    var MobileDetect = require('mobile-detect'),
    md = new MobileDetect(req.headers['user-agent']);
//... see below

    Exemple:

    var md = new MobileDetect(
    'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30');

//more typically we would instantiate with 'window.navigator.userAgent'
//as user-agent; this string literal is only for better understanding

console.log( md.mobile() );          //'Sony'
console.log( md.phone() );           //'Sony'
console.log( md.tablet() );          //null
console.log( md.userAgent() );       //'Safari'
console.log( md.os() );              //'AndroidOS'
console.log( md.is('iPhone') );      //false
console.log( md.is('bot') );         //false
console.log( md.version('Webkit') );         //534.3
console.log( md.versionStr('Build') );       //'4.1.A.0.562'
console.log( md.match('playstation|xbox') ); //false
    InformationsquelleAutor BuZZ-dEE
  18. 0

    Comme je l' (sorte de sans succès) recherche de la bonne solution pour mon hack, j'ai envie d'ajouter mon hack ici néanmoins: j'ai simplement vérifier leur prise en charge de l'orientation de l'écran, qui semble la plus importante différence entre les mobiles et de bureau:

    var is_handheld=0; //juste un mondial
    si(fenêtre.DeviceOrientationEvent) {is_handheld=1;}

    Cela étant dit, à mon humble avis, une page devrait également manuel offre le choix entre mobile /aménagement de bureau. Je suis en 1920*1080 et je peux faire un zoom - une trop simplifiée et réduite wordpressoid morceau n'est pas toujours une bonne chose. Surtout forcer une mise en page basée sur chômé dispositif de détection - il arrive tout le temps.

    InformationsquelleAutor dd_1138
  19. 0

    De test pour l'agent utilisateur est complexe, illisible et invariablement échoue.
    Je n'ai pas trouver que les médias match pour "ordinateur de poche" a fonctionné pour moi. La solution la plus simple était de détecter si la souris était disponible. Et qui peut être fait comme ceci:

    var result = window.matchMedia("(any-pointer:coarse)").matches;

    Qui vous dira si vous avez besoin de montrer placez les articles ou pas et tout ce qui nécessite un physique pointeur. Le dimensionnement peut alors être effectuée sur d'autres requêtes de média en fonction de la largeur.

    Suivantes petite bibliothèque est une ceinture accolades version de la requête ci-dessus, devrait couvrir la plupart des "êtes-vous d'une tablette ou d'un téléphone sans souris" des scénarios.

    https://patrickhlauke.github.io/touch/touchscreen-detection/

    Médias matches ont été pris en charge depuis 2015 et vous pouvez vérifier la compatibilité ici:
    https://caniuse.com/#search=matchMedia

    En bref, vous devez maintenir des variables quant à savoir si l'écran est un écran tactile et aussi de ce que la taille de l'écran. En théorie, je pourrais avoir un petit écran sur une souris exploité bureau.

    InformationsquelleAutor PeterS
  20. 0

    Similaires à plusieurs des réponses ci-dessus. Cette fonction simple, fonctionne très bien pour moi. Il est en cours de 2019

    function IsMobileCard()
{
var 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;   
}
    InformationsquelleAutor Debbie Kurth