Was ist der beste Weg, um ein mobiles Gerät zu erkennen?

1651

Gibt es eine solide Möglichkeit zu erkennen, ob ein Benutzer ein mobiles Gerät in jQuery verwendet oder nicht? Ähnliches wie das CSS @ media-Attribut? Ich möchte ein anderes Skript ausführen, wenn sich der Browser auf einem Handheld-Gerät befindet.

Die jQuery- $.browserFunktion ist nicht das, wonach ich suche.

superUntitled
quelle
7
Geben Sie eine mobile URL speziell für mobile Geräte an. So gehen die meisten großen Websites mit Mobilgeräten um. Siehe m.google.com .
Meagar
6
jQuery kann und kann nicht alles. Es bietet browserübergreifende DOM-Durchquerung und -Manipulation, einfache Animation und Ajax zwischen Browsern und erstellt ein Skelett-Framework, auf dem Plugins aufbauen können. Bitte beachten Sie die Einschränkungen von jQuery, bevor Sie speziell nach einer jQuery-Lösung fragen .
Yi Jiang
78
Benutzeragenten bewegen ständig Ziele, jeder, der diesen Beitrag liest, sollte sehr vorsichtig sein, wenn Benutzeragenten schnüffeln
Rob
46
Was ist ein "mobiles" Gerät? Ist es ein Gerät, das Touch unterstützt (einschließlich Chrome Pixels und Windows 8-Laptops mit Mäusen)? Ist es ein Gerät mit einem kleinen Bildschirm (was ist mit Retina-iPads)? Ist es ein Gerät mit einer langsamen CPU? Oder ein Gerät mit einer langsamen Internetverbindung? Je nachdem, was Sie tun möchten, variiert die Antwort auf diese Frage. Die Bildschirmauflösung oder Berührung zu erreichen ist einfach. Wenn Sie für einige Geräte kleinere Inhalte oder weniger intensive JS bereitstellen möchten, gibt es keine Silberkugel. Testen Sie auf window.navigator.connection und greifen Sie auf (böses, schlechtes, schlecht beratenes) userAgent-Sniffing zurück. Meine 2 Cent.
David Gilbertson
3
@ Cole "Cole9" Johnson Mein Punkt genau. "Mobil" scheint als Überbegriff für Touch, langsame CPU, langsames Netzwerk und kleinen Bildschirm verwendet zu werden. Aber keine dieser Annahmen ist perfekt. Ich glaube, dass die individuelle Betrachtung dieser Produkte zu einem besseren Produkt führt als das Design für ein vages Konzept von „mobil“. Daher stelle ich diese Frage dem OP.
David Gilbertson

Antworten:

2027

Anmerkung des Herausgebers: Die Erkennung von Benutzeragenten wird für moderne Webanwendungen nicht empfohlen. In den Kommentaren unter dieser Antwort finden Sie eine Bestätigung dieser Tatsache. Es wird empfohlen, eine der anderen Antworten mithilfe der Funktionserkennung und / oder Medienabfragen zu verwenden.


Anstatt jQuery zu verwenden, können Sie es mit einfachem JavaScript erkennen:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

Oder Sie können beide kombinieren, um den Zugriff über jQuery zu erleichtern ...

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

Jetzt $.browserwird "device"für alle oben genannten Geräte zurückkehren

Hinweis: $.browserauf entfernt jQuery v1.9.1 . Sie können dies jedoch verwenden, indem Sie den Code des jQuery-Migrations-Plugins verwenden


Eine gründlichere Version:

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;
}
Süßigkeiten-BlingBling
quelle
438
Das Schnüffeln von Benutzeragenten ist eine sehr knifflige Erkennungstechnik. Zeichenfolgen von Benutzeragenten sind ein sich ständig bewegendes Ziel. Sie sollten nicht allein als vertrauenswürdig eingestuft werden. Leute, die diesen Beitrag abstimmen, sollten darüber nachdenken, mehr zu recherchieren.
Rob
65
Eines der Probleme beim Sniffing für bestimmte Geräte aus dem Benutzeragenten besteht darin, dass Sie daran denken müssen, Ihre Erkennung zu aktualisieren, wenn neue Geräte herauskommen. Dies ist keine ideale Lösung.
ICodeForCoffee
11
Der Dolphin-Browser auf Android sendet keine dieser Zeichenfolgen!
Feeela
88
Wenn Ihr Benutzer schlau genug oder die Entwickler dumm genug sind, die Zeichenfolge des Benutzeragenten zu ändern, wer kümmert sich dann um sie ...
mattdlockyer
58
Wie mobil würden Sie einen Android-Fernseher mit Maus betrachten? Wie mobil ist ein Windows-PC, der im Dual-Modus (mit Tastatur oder als Touchscreen) ausgeführt werden kann? Wenn Sie dies getan haben, bevor das iPad erfunden wurde, mussten Sie es später zu allen Ihren Websites hinzufügen. Nächste Betriebssysteme kommen heraus: Ubuntu Mobile, FirefoxOS, Tizen ....This.Is.A.Bad.Idea.
FrancescoMM
535

Für mich ist klein schön, also benutze ich diese Technik:

In der CSS-Datei:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

In der jQuery / JavaScript-Datei:

$( 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
    }
 });

Mein Ziel war es, meine Website "mobilfreundlich" zu gestalten. Daher verwende ich CSS-Medienabfragen, um Elemente abhängig von der Bildschirmgröße anzuzeigen / auszublenden.

In meiner mobilen Version möchte ich beispielsweise die Facebook Like Box nicht aktivieren, da sie all diese Profilbilder und Inhalte lädt. Und das ist nicht gut für mobile Besucher. Neben dem Ausblenden des Containerelements mache ich dies auch im jQuery-Codeblock (oben):

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

Sie können es in Aktion unter http://lisboaautentica.com sehen

Ich arbeite immer noch an der mobilen Version, daher sieht sie zum Zeitpunkt des Schreibens immer noch nicht so aus, wie sie sollte.

Update von dekin88

Es ist eine JavaScript-API zum Erkennen von Medien integriert. Anstatt die obige Lösung zu verwenden, verwenden Sie einfach Folgendes:

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

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

Browser-Unterstützung: http://caniuse.com/#feat=matchmedia

Der Vorteil dieser Methode besteht darin, dass sie nicht nur einfacher und kürzer ist, sondern dass Sie bei Bedarf auch verschiedene Geräte wie Smartphones und Tablets bedingt separat anvisieren können, ohne dem DOM Dummy-Elemente hinzufügen zu müssen.

Gonçalo Peres
quelle
8
Benötigen Sie nicht # ein Element WIRKLICH IM DOM, damit dies funktioniert?
Rimer
68
-1 Die screen.widthEigenschaft ist global. Es ist nicht erforderlich, dem DOM willkürlich ein Element hinzuzufügen und unnötigerweise CSS-Medienabfragen einzubringen. Wenn sich der Browser auf einem Desktop befindet und der Benutzer die Fenstergröße ändert, $is_mobilewird er nicht aktualisiert.
Merv
98
Warum nicht:if( screen.width <= 480 ) { // is mobile }
Andrewrjones
23
@andrewrjones Retina-Geräte verdoppeln den widthAttributwert IIRC. Daher wird ein Retina iPhone eine hat widthvon 640und eine Höhe von 960im Hoch- und ein widthvon 960und eine Höhe von 640in der Landschaft.
Cole Johnson
66
Sie haben gerade neu erfunden window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
Paul Irish
236

Laut Mozilla - Browsererkennung mit dem User Agent :

Zusammenfassend empfehlen wir, irgendwo im User Agent nach der Zeichenfolge "Mobi" zu suchen, um ein mobiles Gerät zu erkennen.

So was:

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

Dies entspricht allen gängigen Benutzeragenten für mobile Browser, einschließlich Mozilla, Safari, IE, Opera, Chrome usw.

Update für Android

EricL empfiehlt, auch Androidals Benutzeragent zu testen , da die Zeichenfolge des Chrome-Benutzeragenten für Tablets nicht "Mobi" enthält (die Telefonversionen jedoch):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}
QuasarDonkey
quelle
11
Danke für die Antwort! Ich bevorzuge /Mobi/i.test(navigator.userAgent)jedoch, da test () einen Booleschen Wert zurückgibt.
Arminrosu
5
Paradoxerweise gibt FireFox Mobile auf einem Samsung Galaxy Note 8 Mobi nicht zurück und der Test gibt false zurück.
Eirinn
13
In dem verlinkten Artikel wird erwähnt: Wenn das Gerät groß genug ist, dass es nicht mit „Mobi“ gekennzeichnet ist, sollten Sie Ihre Desktop-Site bereitstellen (die als bewährte Methode ohnehin die Berührungseingabe unterstützen sollte, da mehr Desktop-Computer mit Touchscreens angezeigt werden).
QuasarDonkey
2
Dies ist viel besser als die anderen vorgeschlagenen Lösungen, es sollte die akzeptierte Antwort imo
RNobel
9
Derp. Vielen Dank. Ich konnte meinen vorherigen Beitrag nicht bearbeiten. Hier ist es wieder:/Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
EricL
90

Ein einfacher und effektiver Einzeiler:

function isMobile() { return ('ontouchstart' in document.documentElement); }

Der obige Code berücksichtigt jedoch nicht den Fall für Laptops mit Touchscreen. Daher stelle ich diese zweite Version zur Verfügung, die auf der @ Julian-Lösung basiert :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
sequielo
quelle
29
Was ist mit Windows-Laptops mit Touchscreen?
Chris Cinelli
10
Die zweite von isMobileIhnen bereitgestellte Funktion kehrt trueauf meinem Destop-Gerät zurück !! (Google Chrome v44.0)
Luke
12
Dies ist eher eine isTouchSupported-Methode, die nicht wirklich mobil erkannt wird.
Barkermn01
3
Nicht alle Mobiltelefone verfügen über Touchscreens.
Andrew
@LukeP Aktualisieren Sie, wenn Sie von der mobilen Emulation zum Desktop wechseln?
Christian4423
81

Was Sie tun, indem Sie ein mobiles Gerät erkennen möchten, kommt einem IMO-Konzept "Browser-Sniffing" etwas zu nahe. Es wäre wahrscheinlich viel besser, eine Feature-Erkennung durchzuführen. Bibliotheken wie http://www.modernizr.com/ können dabei helfen.

Wo liegt beispielsweise die Grenze zwischen mobil und nicht mobil? Es wird von Tag zu Tag verschwommener.

Bart
quelle
3
Trotzdem kann ein Benutzer "jquery mobile" für diese Geräte verwenden, unabhängig von den unterstützten Funktionen.
Sirber
9
Zum Beispiel ist mein Problem mit "mobil" "nicht mobil" meine Rollover-Funktionen. Ich habe JS eingerichtet, um die Funktionen auszuschalten. Ich muss nur erkennen
Sam Sussman
4
Wenn Sie jedoch eine gerätespezifische herunterladbare App anbieten möchten, kann dies hilfreich sein.
Bastes
3
Es hängt von der Situation ab. Ich suche nach etwas, das mir sagt, ob sich der Benutzer auf einem mobilen Gerät befindet, damit ich einige schwere JavaScript-basierte Animationen deaktivieren kann. UA-Sniffing wäre viel geeigneter als der Versuch, die JavaScript-Leistungsfähigkeiten des Browsers des Benutzers zu "erkennen".
Rick Suggs
9
Mobil und nicht mobil ist ein sehr großer Unterschied. Die Verwendung der "Funktionserkennung" ist dumm, wenn Sie versuchen, Interaktionen / Benutzeroberfläche für ein mobiles / Desktop-Erlebnis zu nutzen. Persönlich wünsche ich mir, dass es eine einfache (und zuverlässige) Möglichkeit gibt, das Betriebssystem zu erhalten, in dem der aktuelle Browser ausgeführt wird
nbsp
66

Es ist nicht jQuery, aber ich habe folgendes gefunden: http://detectmobilebrowser.com/

Es bietet Skripte zum Erkennen mobiler Browser in mehreren Sprachen, von denen eine JavaScript ist. Das kann Ihnen bei dem helfen, was Sie suchen.

Da Sie jedoch jQuery verwenden, möchten Sie möglicherweise die jQuery.support-Auflistung kennen. Es ist eine Sammlung von Eigenschaften zum Erkennen der Funktionen des aktuellen Browsers. Die Dokumentation finden Sie hier: http://api.jquery.com/jQuery.support/

Da ich nicht genau weiß, was Sie erreichen möchten, weiß ich nicht, welche davon am nützlichsten ist.

Alles in allem denke ich, dass Sie am besten ein anderes Skript in einer serverseitigen Sprache umleiten oder in die Ausgabe schreiben sollten (falls dies eine Option ist). Da Sie die Funktionen eines mobilen Browsers x nicht wirklich kennen, ist die Erkennungs- und Änderungslogik auf der Serverseite die zuverlässigste Methode. Natürlich ist das alles ein strittiger Punkt, wenn Sie keine serverseitige Sprache verwenden können :)

Ender
quelle
6
das unterstützt keine iPads. Um das iPad zu unterstützen, suchen Sie nach ip (hone | od) und "| ad" - zB ip (hone | od | ad)
Jayson Ragasa
3
Ich habe gerade das Javascript von Detectmobilebrowser.com/ ausprobiert und es funktioniert NICHT für das iPad.
Milche Patern
3
@ MilchePatern das ist, weil das Skript fehlerhaft ist, iPad anstelle von iPad verwenden, dann funktioniert es, ich hatte das Problem auf meinem Samsung Tab, musste Android ISO Android verwenden :)
Coen Damen
13
Es gibt dort eine jQuery-Version, und sie funktioniert einwandfrei, aber für die Tablet-Erkennung müssen Sie |android|ipad|playbook|silkwie im Abschnitt "Über" beschrieben (es ist
beabsichtigt
3
Ja, ein Tablet ist kein Handy. Die Website wird als dectect mobile Browser bezeichnet.
Felix Eve
47

Manchmal ist es wünschenswert zu wissen, welches Markengerät ein Kunde verwendet, um für dieses Gerät spezifische Inhalte anzuzeigen, z. B. einen Link zum iPhone Store oder zum Android Market. Modernizer ist großartig, zeigt Ihnen jedoch nur Browserfunktionen wie HTML5 oder Flash.

Hier ist meine UserAgent-Lösung in jQuery, um für jeden Gerätetyp eine andere Klasse anzuzeigen:

/*** 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();
    }
}

Diese Lösung stammt von Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Genkilabs
quelle
Das funktioniert super. Ich musste eine jQuery-Funktion deaktivieren, die beim Scrollen mit einem iPad oder Android-Telefon ausgeführt wird. Da die verschiedenen Geräte unterschiedliche Bildschirmbreiten haben, war dies eine einfache Lösung. Danke vielmals.
Eric Allen
Das einzige Problem bei der Verwendung des Android-Tests ist, was ist mit der Ecke, die den Android-Benutzeragenten verwendet
MayorMonty
Eine gute Antwort, die zeigt, dass wir keine Fundamentalisten für die Erkennung von Merkmalen sein müssen.
Fernando
44

Eine Lösung gefunden in: 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());
    }
};

Und um zu überprüfen, ob es sich um ein Mobiltelefon handelt, können Sie Folgendes testen:

if(isMobile.any()) {
   //some code...
}
Gabriel
quelle
Eine auf dem Benutzeragenten basierende Lösung funktioniert gut, wenn Sie sicher sein können, dass sich die Unterzeichenfolge direkt auf den Gerätetyp bezieht. dh iPad = iPad. Mittlerweile gibt es jedoch so viele verschiedene Gerätetypen (über 25.000), dass der Ansatz für die meisten Geschäftszwecke nicht genau genug ist. Ich habe das Open Source-Projekt 51Degrees.com gegründet , um eine zuverlässige und robuste Alternative zu bieten. Es funktioniert sowohl in JavaScript als auch auf der Serverseite. Die gesamte Dokumentation ist hier ... 51degrees.com/support/documentation
James Rosewell
Ich habe es auch oben verwendet und es hat gut für mich funktioniert, aber jetzt funktioniert es nicht mehr für Android 5.1 und höher. Gibt es etwas, das sich in Android 5.1 und höher geändert hat?
Imran Qamer
if (isMobile.Android ()) {document.getElementById ("myAnchor"). setAttribute ("href", " google.com" ); }
Amranur Rahman
25

Wenn mit "mobil" "kleiner Bildschirm" gemeint ist, verwende ich Folgendes:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

Auf dem iPhone erhalten Sie eine window.screen.width von 320. Auf Android erhalten Sie eine window.outerWidth von 480 (dies kann jedoch von Android abhängen). iPads und Android-Tablets geben Zahlen wie 768 zurück, sodass sie die vollständige Ansicht erhalten, die Sie möchten.

Chris Moschini
quelle
1
Warum reicht 'window.screen.width' nicht aus? Scheint, als würden Sie entweder "window.screen.width" oder "window.outerWidth" kleiner nehmen. Warum interessiert dich 'OuterWidth'? Vielen Dank im Voraus für die Antwort!
user1330974
16

Wenn Sie Modernizr verwenden , ist es Modernizr.touchwie bereits erwähnt sehr einfach zu verwenden .

Ich bevorzuge jedoch die Verwendung einer Kombination aus Modernizr.touchund Testen von Benutzeragenten, um sicher zu gehen.

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
    }

Wenn Sie Modernizr nicht verwenden, können Sie die Modernizr.touchobige Funktion einfach durch ersetzen('ontouchstart' in document.documentElement)

Beachten Sie außerdem, dass Sie durch das Testen des Benutzeragenten iemobileeine größere Auswahl an erkannten Microsoft-Mobilgeräten erhalten als Windows Phone.

Siehe auch diese SO-Frage

PeterPan
quelle
Und das gleiche in Dart : TouchEvent.supported.
Kai Sellgren
('ontouchstart' in window)ist auch eine Alternative Modernizr.touchzu hacks.mozilla.org/2013/04/…
JVE999
Ich denke, modernizr ist eine großartige Lösung!
Bobby Russell
Sie sollten RegEx wirklich |anstelle vieler Übereinstimmungen verwenden. Sie brauchen das auch nicht, toLowerCase()weil Sie den iModifikator haben. Hier: var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
Oriadam
14

Sie können sich nicht darauf verlassen navigator.userAgent, dass nicht jedes Gerät sein echtes Betriebssystem preisgibt. Auf meinem HTC hängt es zum Beispiel von den Einstellungen ab ("mobile Version verwenden" ein / aus). Auf http://my.clockodo.com haben wir einfach screen.widthkleine Geräte erkannt. Leider gibt es in einigen Android-Versionen einen Fehler mit screen.width. Sie können diese Methode mit dem userAgent kombinieren:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}
Ben H.
quelle
8
Viele Handys haben eine Breite von> 1000, besonders im
Querformat
14

Ich weiß, dass diese Frage viele Antworten hat, aber nach dem, was ich gesehen habe, nähert sich niemand der Antwort so, wie ich das lösen würde.

CSS verwendet die Breite (Medienabfragen), um zu bestimmen, welche Stile basierend auf der Breite auf das Webdokument angewendet werden. Warum nicht die Breite im JavaScript verwenden?

Zum Beispiel gibt es in den Medienabfragen von Bootstrap (Mobile First) 4 Fang- / Haltepunkte:

  • Extra kleine Geräte sind 768 Pixel und kleiner.
  • Kleine Geräte reichen von 768 bis 991 Pixel.
  • Mittlere Geräte reichen von 992 bis 1199 Pixel.
  • Große Geräte haben eine Größe von 1200 Pixel und mehr.

Damit können wir auch unser JavaScript-Problem lösen.

Zuerst erstellen wir eine Funktion, die die Fenstergröße abruft und einen Wert zurückgibt, mit dem wir sehen können, welche Größe das Gerät in unserer Anwendung anzeigt:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

Nachdem wir die Funktion eingerichtet haben, können wir sie aufrufen und den Wert speichern:

var device = getBrowserWidth();

Ihre Frage war

Ich möchte ein anderes Skript ausführen, wenn sich der Browser auf einem Handheld-Gerät befindet.

Nachdem wir nun die Geräteinformationen haben, bleibt nur noch eine if-Anweisung:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

Hier ist ein Beispiel für CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Jacob King
quelle
Das hat bei mir am besten funktioniert. Da ich Bootstrap für einige mobile Weiterleitungsseiten verwendet habe, hat diese Technik gut funktioniert, um automatisch von einer nicht mobilen Weiterleitung (ohne Bootstrap) zu einer Bootstrap-Seite umzuleiten. Tipp: Ich habe ein kleines Problem in den IE11 F12-Tools gefunden: Ich hatte die Emulation in den F12 Dev Tools für ein mobiles Gerät aktiviert und es gab Probleme beim Erkennen der Fenstergröße. Ich hatte die Größe unterhalb des xs-Haltepunkts geändert, aber es wurde als md erkannt. Sobald ich die Emulation eines Telefons deaktiviert und die Seite aktualisiert habe, wurde die Größe korrekt erkannt und in meinem Code auf eine Bootstrap-Seite umgeleitet.
Jeff Mergler
Das heißt, ich habe eine Weile gesucht. Vielen Dank!
Entwickler
2
@ JacobKing Sie sagten, Small Devices range from 768 to 991 pixels.dies bedeutet, es sollte sein window.innerWidth < 992(991 ist enthalten) das gleiche für 1199 sollte es stattdessen <1200 sein
medBouzid
13

In einer Zeile Javascript:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

Wenn der Benutzeragent 'Mobi' enthält (gemäß MDN) und ontouchstart verfügbar ist, handelt es sich wahrscheinlich um ein mobiles Gerät.

James Westgate
quelle
1
musste /Mobi/.test(navigator.userAgent)... matchhat es nicht für mich
getan
12

Ich bin überrascht, dass niemand auf eine nette Website hingewiesen hat: http://detectmobilebrowsers.com/ Sie hat vorgefertigten Code in verschiedenen Sprachen für die mobile Erkennung (einschließlich, aber nicht beschränkt auf):

  • Apache
  • ASP
  • C #
  • IIS
  • JavaScript
  • NGINX
  • PHP
  • Perl
  • Python
  • Schienen

Wenn Sie die Tablets ebenfalls erkennen müssen, lesen Sie einfach den Abschnitt Info, um weitere RegEx-Parameter zu erhalten.

Android-Tablets, iPads, Kindle Fires und PlayBooks werden vom Design her nicht erkannt. |android|ipad|playbook|silkFügen Sie dem ersten regulären Ausdruck hinzu , um Unterstützung für Tablets hinzuzufügen .

Maksim Luzik
quelle
Für mich hat es funktioniert. Können Sie genauer sagen, welchen Code Sie verwenden und wo ein Problem zu sein scheint?
Maksim Luzik
Diese Seite ist eine Antwort, von allen anderen Antworten ist das Kopieren und Einfügen dieser Seite
Rubén Ruíz
11

Wenn Sie sich keine besonderen Sorgen um kleine Displays machen, können Sie die Breiten- / Höhenerkennung verwenden. Auf diese Weise wird die mobile Site aufgerufen, wenn die Breite unter einer bestimmten Größe liegt. Es ist möglicherweise nicht der perfekte Weg, aber für mehrere Geräte ist es wahrscheinlich am einfachsten zu erkennen. Möglicherweise müssen Sie eine bestimmte für das iPhone 4 (große Auflösung) eingeben.

MoDFoX
quelle
9

Um eine zusätzliche Kontrollebene hinzuzufügen, verwende ich den HTML5-Speicher, um festzustellen, ob mobiler Speicher oder Desktop-Speicher verwendet wird. Wenn der Browser keinen Speicher unterstützt, habe ich ein Array von mobilen Browsernamen und vergleiche den Benutzeragenten mit den Browsern im Array.

Es ist ziemlich einfach. Hier ist die Funktion:

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

    // nothing found.. assume desktop
    return false;
}
dotTutorials
quelle
1
Ihre auf localStorage basierende Annahme ist sehr interessant. Können Sie eine Reihe von unterstützten Geräten oder Browsern bereitstellen, die korrekt zu Ihrem Skript passen? Ich bin daran interessiert , eine Lösung für diese Frage zu finden , und der Versuch, Browser für mobile Tablets zu erkennen, kann in der Tat eine interessante Problemumgehung sein
Gruber,
9

Wenn festgestellt wird, dass nur eine Überprüfung navigator.userAgentnicht immer zuverlässig ist. Eine höhere Zuverlässigkeit kann auch durch Überprüfung erreicht werden navigator.platform. Eine einfache Änderung einer vorherigen Antwort scheint besser zu funktionieren:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}
Mark
quelle
5
Eine willkürliche Ablehnung einer Antwort ohne Kommentar sollte nicht erlaubt sein. Bestenfalls ist es unhöflich.
Mark
8

Ich rate Ihnen, http://wurfl.io/ zu besuchen.

Kurz gesagt, wenn Sie eine winzige JavaScript-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:

if(WURFL.is_mobile) {
    //dostuff();
}

Das ist was Sie suchen.

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

Luca Passani
quelle
Wurfl konnte nexus7 und iPad mini nicht erkennen!
Jacob
Beim Nexus 7 stimmt etwas nicht. Sind Sie sicher, dass der Nexus die UA-Zeichenfolge in den Einstellungen nicht gefälscht hat? Was das iPad mini betrifft, ist das sehr schwer von dem anderen iPad zu unterscheiden, aber es wurde immer noch als iPad erkannt, oder? Haben Sie meinen Beitrag abgelehnt?
Luca Passani
Nein, das iPad Mini wurde als Desktop-Gerät erkannt
Jacob
7

Schauen Sie sich diesen Beitrag an , er enthält einen wirklich schönen Code-Ausschnitt darüber, was zu tun ist, wenn Touch-Geräte erkannt werden, oder was zu tun ist, wenn ein Touchstart-Ereignis aufgerufen wird:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}
Safran Ali
quelle
'ontouchstart' in document.documentElementist wahrscheinlich ein besserer Test für die Touch-Unterstützung als window.Touch. Verwenden Sie noch besser Modernizr.js ( modernizr.com ), da Sie viel darüber nachgedacht haben, die Berührungserkennung richtig zu machen. Sie können ihren Berührungserkennungscode unter modernizr.com/downloads/modernizr.js sehen, wenn Sie den Entwicklungscode anzeigen und nach "touch" suchen.
Robocat
3
Die Berührungserkennung hat mich in Schwierigkeiten gebracht, da einige neue Windows 8-Laptops in Chrome als Touchscreens erkannt werden, was zu merkwürdigen Ergebnissen führt.
JWarner
6

Hier ist eine Funktion, mit der Sie eine richtige / falsche Antwort erhalten können, ob Sie in einem mobilen Browser ausgeführt werden. Ja, es ist Browser-Sniffing, aber manchmal ist es genau das, was Sie brauchen.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}
Jonathon Hill
quelle
1
Dadurch werden viele mobile Browser, insbesondere das mobile Chrome, nicht erkannt. Es wird wahrscheinlich auch auf einigen von: Opera Mobile, Firefox Mobile, Opera Mini, verschiedenen gängigen chinesischen mobilen Browsern usw. usw.
fehlschlagen
Das brauchst du nicht for! + Sie haben vergessen, ein RegExp zu erstellen. Hier ist eine einfachere:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
Oriadam
6

Alle Antworten verwenden User-Agent, um den Browser zu erkennen, aber die auf User-Agent basierende Geräteerkennung ist keine sehr gute Lösung. Besser ist es, Funktionen wie Touch-Geräte 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
4
Leider ist dies nicht zuverlässig und kehrt trueauf Desktop-PCs mit Touchscreen trotzdem zurück . stucox.com/blog/you-cant-detect-a-touchscreen
JustAMartin
1
Vergessen Sie nicht Laptops mit Touchscreen und voller Browser-Erfahrung. :-)
Mike Kormendy
Dies ist möglicherweise nicht der richtige Weg, um zu überprüfen, ob es sich um ein mobiles Gerät handelt oder nicht. Wie der Name Ihrer Funktion besagt, ist es jedoch perfekt, nach berührungsfähigen Geräten zu suchen. +1 von mir ;-)
Kathara
6

Ich würde vorschlagen, die folgende Kombination von Zeichenfolgen zu verwenden, um zu überprüfen, ob der Gerätetyp verwendet wird.

Gemäß Mozilla-Dokumentation wird eine Zeichenfolge Mobiempfohlen. Einige der alten Tablets geben jedoch nicht true zurück, wenn sie nur Mobiverwendet werden. Daher sollten wir auch TabletZeichenfolgen verwenden.

In ähnlicher Weise für auf der sicheren Seite zu sein iPadund iPhonekönnte auch Art , das Gerät zu überprüfen verwendet werden Strings.

Die meisten neuen Geräte würden nur truefür MobiZeichenfolgen zurückgegeben.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}
Sanjay Joshi
quelle
3
Ich musste dort "Android" hinzufügen, um an Tablets arbeiten zu können. Ich muss optimieren, aber ich mag den Ansatz.
Andy
6

Sie können Medienabfragen verwenden, um diese problemlos verarbeiten zu können.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}
vin
quelle
Ich mag diesen Ansatz, ich habe mich window.matchMedia("(pointer:coarse)").matches;von einer anderen Antwort gelöst.
Jason Lydon
6

Tolle Antwort, danke. Kleine Verbesserung zur Unterstützung von Windows Phone und Zune:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}
Victor Juri
quelle
Ich würde sagen, dies ist die einfachste (möglicherweise nicht die beste) Lösung, wenn Sie versuchen, Hover- / Drag-Ereignisse für mobile Geräte zu verarbeiten. Ich verwende so etwas, um einen "isMobile" -Booleschen Wert zu erstellen, der dann für jedes Hover- / Mouseover-Ereignis überprüft wird. Das sind sowieso meine zwei Cent. Das Hinzufügen weiterer js-Bibliotheken oder von Code, für den Benutzerinteraktion erforderlich ist, macht für mich nicht allzu viel Sinn. Korrigieren Sie mich, wenn ich falsch liege.
MeanMatt
3
Da Sie reguläre Ausdrücke verwenden, verwenden Sie sie tatsächlich:if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
foobarbecue
5

Benutze das:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+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|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Dann benutze dies:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}
NCoder
quelle
5

Einfache Funktion basierend auf http://detectmobilebrowser.com/

function isMobile() {
    var a = 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|phone)|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));
}
lucasls
quelle
5
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Wenn Sie zu einem Browser gelangen und versuchen, navigator.userAgent abzurufen, erhalten wir die folgenden Browserinformationen

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, wie Gecko) Chrome / 64.0.3282.186 Safari / 537.36

Das Gleiche gilt für Mobilgeräte, denen Sie folgen werden

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, wie Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

Jeder mobile Browser verfügt über einen Benutzeragenten mit einer Zeichenfolge, die "Mobil" enthält. Daher verwende ich das obige Snippet in meinem Code, um zu überprüfen, ob der aktuelle Benutzeragent Web / Mobil ist. Basierend auf dem Ergebnis werde ich die erforderlichen Änderungen vornehmen.

Vishnu Prasanth G.
quelle
4

ich benutze das

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}
Yene Mulatu
quelle
4

Wie wäre es mit mobiledetect.net ?

Andere Lösungen scheinen zu einfach. Dies ist eine leichte PHP-Klasse. Es verwendet die User-Agent-Zeichenfolge in Kombination mit bestimmten HTTP-Headern, um die mobile Umgebung zu erkennen. Sie können auch von Mobile Detect profitieren, indem Sie Plugins von Drittanbietern verwenden, die für WordPress, Drupal, Joomla, Magento usw. verfügbar sind.

Luca Mori Polpettini
quelle
Weil die Frage nach jQuery gestellt wurde?
Craicerjack
3

Benutzeragentenzeichenfolgen sollten nicht allein als vertrauenswürdig eingestuft werden. Die folgende Lösung funktioniert in allen Situationen.

function isMobile(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)));
}

und rufen Sie diese Funktion auf:

isMobile(navigator.userAgent || navigator.vendor || window.opera)
kaxi1993
quelle