Wie erkenne ich ein mobiles Gerät mit JavaScript?

78

Ich wurde gebeten, eine tatsächliche HTML-Seite / JavaScript zu erstellen, um die Erkennung der mobilen Geräte (iPhone / iPad / Android) mithilfe von JavaScript-Code zu simulieren. Dadurch wird der Benutzer zu einem anderen Bildschirm weitergeleitet, in dem er nach seiner E-Mail-Adresse gefragt wird.

javascript html mobile device Jeevs
quelle
Wenn Sie die Bildschirmabmessungen auf diese Weise kennen, können Sie zwischen einem iPhone und einem iPad unterscheiden
Lovesh
1
Verwendung kann Code verwenden: stackoverflow.com/questions/11381673/…
Mudaser Ali

Antworten:

82

Ich weiß, dass diese Antwort 3 Jahre zu spät kommt, aber keine der anderen Antworten ist tatsächlich 100% richtig. Wenn Sie feststellen möchten, ob sich der Benutzer auf einem mobilen Gerät befindet (Android, iOS, BlackBerry, Windows Phone, Kindle usw.), können Sie den folgenden Code verwenden:

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.
}
Baraa
quelle
1
Ich würde auch das Schlüsselwort "Mobile" hinzufügen.
Király István
3
Benötigen Sie eine Bibliothek? Ich bezweifle, dass das so einfach ist.
28

Sie würden die Benutzeragentenzeichenfolge des anfordernden Browsers erkennen und dann basierend darauf entscheiden, ob es sich um einen mobilen Browser handelt oder nicht. Dieses Gerät ist nicht perfekt und wird niemals darauf zurückzuführen sein, dass Benutzeragenten nicht für mobile Geräte standardisiert sind (zumindest meines Wissens nicht).

Diese Website hilft Ihnen beim Erstellen des Codes: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

Beispiel :

Sie können den Benutzeragenten in Javascript erhalten, indem Sie dies tun:

var uagent = navigator.userAgent.toLowerCase();

Und dann machen Sie die Schecks im gleichen Format wie dieses (nur mit dem iPhone als schnellem Beispiel, aber andere müssten ein bisschen anders sein)

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

Bearbeiten

Sie würden eine einfache HTML-Seite wie folgt erstellen:

<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>
slandau
quelle
Aber ich frage mich, was anfangen würde? Erstellen Sie eine Dummy-Webseite und binden Sie diese Codierung dort ein. Ist es HTML, das wir verwenden werden, weil ich, wie ich oben in meinem Code erwähnt habe, nichts zu Beginn habe.
Jeevs
Großartig!!!! Dank dafür. Wie wäre es, wenn Sie es auf eine andere Seite umleiten. Glaubst du, so etwas würde helfen? if ((navigator.userAgent.match (/ iPhone / i)) || (navigator.userAgent.match (/ iPod / i)) || (navigator.userAgent.match (/ Android / i)) {if (document .cookie.indexOf ("iphone_redirect = false") == -1) window.location = " m.espn.go.com/wireless/?iphone&i=COMR ";
— Jeevs
1
Vergessen Sie nicht, dass Benutzeragenten geändert und gefälscht werden können und möglicherweise nicht den aktuellen Browser widerspiegeln. Davon abgesehen ist es ihre eigene Schuld, wenn ein Client seinen UserAgent fälscht / ändert und Sie die falsche Ansicht angezeigt haben. Es gibt andere Möglichkeiten als den reinen Benutzeragenten, obwohl der Benutzeragent normalerweise die Wurzel aller Erkennungen ist. Es gibt ein wirklich gutes (wenn auch veraltetes) Beispiel hier github.com/ahand/mobileesp?files=1
— Nico
Smart - daran habe ich nie gedacht: D
— Stardust
22

Eine ziemlich einfache Lösung besteht darin, die Bildschirmbreite zu überprüfen. Da fast alle Mobilgeräte (derzeit) eine maximale Bildschirmbreite von 480 Pixel haben, ist dies ziemlich zuverlässig:

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

Die Benutzeragentenzeichenfolge ist auch ein Ort zum Suchen. Die erstere Lösung ist jedoch immer noch besser, da die Bildschirmbreite nicht lügt, selbst wenn ein verdammtes Gerät nicht richtig auf den Benutzeragenten reagiert.

Die einzige Ausnahme sind Tablet-PCs wie das iPad. Diese Geräte haben eine höhere Bildschirmbreite als Smartphones, und ich würde wahrscheinlich die User-Agent-Zeichenfolge für diese verwenden.

— jAndy
quelle
Recht!! Ich muss nur iPhone oder Android erkennen. Das sollte also kein Problem sein, aber nur um Sie wissen zu lassen, dass ich absolut nichts zu Beginn habe. Soll ich eine Dummy-Webseite erstellen und diese einbetten? Wie würde die Erkennung überprüft werden? Muss ich das Skript auf ein Telefon übertragen?
— Jeevs
13
Meine Güte, wie sich die Bildschirmbreiten geändert haben;)
— Josh Noe
15 
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 
}
— Ahmed Abu Eldahab
quelle
Dies ist die beste und sauberste Lösung
— Eluleci
2
Obwohl dieser Code nicht mehr als einen Block ausführt, da er immer wieder eine Sache überprüft, sollte dieser Code aus diesem Grund else-if-Blöcke verwenden. Was ist auch, wenn sich die Benutzeragentenvariable zwischen den Blöcken irgendwie ändert? Hier wird mehr als 1 Block ausgeführt.
— Jake Millington
Sie haben Recht, und vergessen Sie nicht, dass Code vor 4 Jahren war :) und es gibt jetzt bessere Tools oder Möglichkeiten, um den gleichen Job zu machen
— Ahmed Abu Eldahab
8 
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;
— kolypto
quelle
2
+1 für den Regex-Abgleich, sodass Benutzer auf einfache Weise auf einmal nach mehreren Geräten suchen können. Aus Gründen der Klarheit möchte ich jedoch hinzufügen, dass es nicht erforderlich ist, die Suchparameter in Groß- und Kleinschreibung zu ändern, da Sie / i am Ende der Regex für unempfindliche Übereinstimmungen angeben. Das Folgende wäre äquivalent (und suche auch nach Android-Geräten): .match (/ ipad | iphone | ipod | android / i)
— Russ
6

Eine einfache Lösung könnte nur CSS sein. Sie können Stile in Ihrem Stylesheet festlegen und sie dann unten anpassen. Moderne Smartphones wirken so, als wären sie nur 480 Pixel breit, während sie tatsächlich viel mehr sind. Der Code zum Erkennen eines kleineren Bildschirms in CSS lautet

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

Hoffe das hilft!

— Ivotje50
quelle
5

ich benutze mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)

— individuo7
quelle
5

Also habe ich das gemacht. Danke euch allen!

<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>
— CSepúlveda
quelle
5

Wenn Sie über diese Frage gestolpert sind, sollten Sie seit dem Jahr 2015 wahrscheinlich window.matchMedia verwenden (und, falls es noch 2015 ist, Polyfilling für ältere Browser):

if (matchMedia('handheld').matches) {
    //...
} else {
    //...
}
— Chris Devereux
quelle
Dies funktionierte bei einem Nexus 5 mit Firefox nicht.
— Raphael
2
Hinweis aus MDN Hinweis: In CSS2.1 und Media Queries 3 wurden mehrere zusätzliche Medientypen definiert (tty, tv, projection, handheld, braille, geprägt, akustisch), die jedoch in Media Queries 4 veraltet waren und nicht verwendet werden sollten.
— PaulCo
Siehe meine Antwort unten, aus irgendeinem Grund funktioniert der Handheld auch bei mir nicht.
— PeterS
3

Sie können die Benutzeragentenzeichenfolge verwenden, um dies zu erkennen.

var useragent = navigator.userAgent.toLowerCase();

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

Eine Liste der Useragent-Zeichenfolgen finden Sie hier http://www.useragentstring.com/pages/useragentstring.php

— tskuzzy
quelle
3

Ich rate Ihnen zum Auschecken http://wurfl.io/ zu besuchen.

Kurz gesagt, wenn Sie eine winzige JS-Datei importieren:

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

Sie erhalten ein JSON-Objekt, das wie folgt aussieht:

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

(vorausgesetzt, Sie verwenden natürlich ein Nexus 7) und Sie können Dinge tun wie:

WURFL.complete_device_name

Das ist was Sie suchen.

Haftungsausschluss: Ich arbeite für das Unternehmen, das diesen kostenlosen Service anbietet. Vielen Dank.

— Luca Passani
quelle
"Sie können diese Dienste kostenlos nutzen, solange Ihre Website öffentlich verfügbar ist und für den Zugriff keine Gebühren oder ein kostenpflichtiges Abonnement erforderlich sind." - web.wurfl.io/#wurfl-js
— Exel Gamboa
2

Dies ist ein Beispiel für die Überprüfung, ob die Webseite in den Desktop oder die mobile App geladen ist.

JS wird beim Laden der Seite ausgeführt, und Sie können beim Laden der Seite Desktop-spezifische Aufgaben ausführen, z. B. Barcode-Scanner ausblenden.

   <!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>
— Hitesh Sahu
quelle
1

Bestimmen Sie, was der Benutzeragent für die Geräte ist, die Sie simulieren müssen, und testen Sie anschließend eine Variable.

zum Beispiel:

// 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
}
— Inversus
quelle
!!~userAgent.indexOf('iphone') // >> true|false
— Cody
1

Die auf dem Benutzeragenten basierende Geräteerkennung ist keine sehr gute Lösung. Besser ist es, Funktionen wie das Touch-Gerät zu erkennen (in der neuen jQuery werden sie entfernt $.browserund $.supportstattdessen verwendet).

Um Mobiltelefone zu erkennen, können Sie nach Berührungsereignissen suchen:

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

Entnommen aus Wie lässt sich ein Touchscreen-Gerät am besten mit JavaScript erkennen?

— jcubic
quelle
Abstimmung nach unten, da OP nach einem mobilen Gerät fragt. Bei Touchscreen-Laptops ist 'Touch Device' heutzutage keine sehr gute Lösung.
— TheBrenny
@ thebrenny Laptops sind mobile Geräte, sie können leicht von Ort zu Ort
— bewegt werden
Oh Mann, ich hatte einige Laptops, die ziemlich nutzlos sind, um tragbar zu sein! 🙃 In beiden Fällen gab OP iPhone, iPad und Android als Beispiele für das an, was sie erkennen wollten, und "mobil" steht für "Mobiltelefon". Wahrscheinlich wäre eine bessere Beschreibung "tastaturlos" gewesen
— TheBrenny
0

Dies ist meine Version, die der oberen ziemlich ähnlich ist, aber ich denke, sie ist gut als Referenz.

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;
}
— Parker LAU
quelle
0

Eine andere Möglichkeit ist die Verwendung von mobile-detect.js . Probieren Sie die Demo aus .

Browsernutzung:

<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

Beispiel:

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
— BuZZ-dEE
quelle
Aber wie funktioniert es selbst
— Bluejayke
0

Da ich (irgendwie ohne Erfolg) nach der richtigen Lösung für meinen Hack gesucht habe, möchte ich meinen Hack hier trotzdem hinzufügen: Ich überprüfe einfach, ob die Geräteorientierung unterstützt wird, was der bedeutendste Unterschied zwischen Handys und Desktop zu sein scheint:

var is_handheld = 0; // nur ein globales if (window.DeviceOrientationEvent) {is_handheld = 1;}

Abgesehen davon sollte imho eine Seite auch die manuelle Auswahl zwischen Mobile / Desktop-Layout bieten. Ich habe 1920 * 1080 und kann zoomen - ein stark vereinfachter und funktionsreduzierter WordPress-Block ist nicht immer eine gute Sache. Insbesondere das Erzwingen eines Layouts, das auf der Erkennung nicht funktionierender Geräte basiert - dies geschieht ständig.

0

Das Testen auf Benutzeragenten ist komplex, chaotisch und schlägt immer fehl. Ich habe auch nicht festgestellt, dass das Medienmatch für "Handheld" für mich funktioniert. Die einfachste Lösung bestand darin, festzustellen, ob die Maus verfügbar war. Und das kann so gemacht werden:

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

Hier erfahren Sie, ob Sie Hover-Elemente anzeigen müssen oder nicht und alles andere, für das ein physischer Zeiger erforderlich ist. Die Dimensionierung kann dann für weitere Medienabfragen basierend auf der Breite vorgenommen werden.

Die folgende kleine Bibliothek ist eine Version der obigen Abfrage mit Gürtelklammern, die die meisten Szenarien "Sind Sie ein Tablet oder ein Telefon ohne Maus?" Abdecken sollte.

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

Medienspiele werden seit 2015 unterstützt und Sie können die Kompatibilität hier überprüfen: https://caniuse.com/#search=matchMedia

Kurz gesagt, Sie sollten Variablen beibehalten, die sich darauf beziehen, ob der Bildschirm ein Touchscreen ist und welche Größe der Bildschirm hat. Theoretisch könnte ich einen winzigen Bildschirm auf einem mausgesteuerten Desktop haben.

PeterS
quelle
Sollten Sie nicht (hover)stattdessen die Medienabfrage verwenden, um festzustellen, ob Hover-Elemente angezeigt werden sollen ?
SpoonMeiser
@SpoonMeiser Mein Punkt ist, dass ich ein Gerät brauche, das schweben kann, auch wenn das Gerät Hover unterstützt. Wenn ich keinen Zeiger habe, kann ich nicht schweben.
PeterS
IIUC Hover bedeutet, dass das primäre Eingabegerät Hover unterstützt, was ein Zeiger, ein Touchscreen jedoch nicht
tun
0

Ähnlich wie bei einigen der obigen Antworten. Diese einfache Funktion funktioniert sehr gut für mich. Es ist ab 2019 aktuell

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;   
}
Debbie Kurth
quelle