Ich suche nach einer Funktion, die einen booleschen Wert zurückgibt, wenn der Benutzer einen mobilen Browser hat oder nicht.
Ich weiß, dass ich navigator.userAgent
diese Funktion mithilfe von Regex verwenden und schreiben kann , aber Benutzeragenten sind für verschiedene Plattformen zu unterschiedlich. Ich bezweifle, dass es einfach wäre, alle möglichen Geräte zu finden, und ich denke, dass dieses Problem schon oft gelöst wurde, daher sollte es eine vollständige Lösung für diese Aufgabe geben.
Ich habe mir diese Site angesehen , aber leider ist das Skript so kryptisch, dass ich keine Ahnung habe, wie ich es für meinen Zweck verwenden soll, nämlich eine Funktion zu erstellen, die true / false zurückgibt.
Vary: User-Agent
Ihre Antwort ergänzen . Andernfalls wird beim Zwischenspeichern von Proxys eine Version gespeichert und an die andere Art von Browser gesendet. AberVary: User-Agent
macht die Antwort im IE nicht zwischenspeicherbar.Antworten:
Verwenden von Regex (von detectmobilebrowsers.com ):
Hier ist eine Funktion, die einen wahnsinnig langen und umfassenden regulären Ausdruck verwendet, der einen
true
oderfalse
Wert zurückgibt , je nachdem, ob der Benutzer mit einem Mobiltelefon surft oder nicht.Für diejenigen, die Tabletten in diesen Test einbeziehen möchten (obwohl dies wohl nicht der Fall sein sollte), können Sie die folgende Funktion verwenden:
Die ursprüngliche Antwort
Sie können dies tun, indem Sie einfach eine Liste von Geräten durchgehen und prüfen, ob die folgenden
useragent
Übereinstimmungen vorliegen:Da Sie jedoch der Meinung sind, dass diese Methode unzuverlässig ist, können Sie davon ausgehen, dass jedes Gerät mit einer Auflösung von 800 x 600 oder weniger auch ein mobiles Gerät ist, wodurch Ihr Ziel noch weiter eingeschränkt wird (obwohl heutzutage viele mobile Geräte viel höhere Auflösungen haben).
dh
Referenz:
quelle
|android|ipad|playbook|silk
Fügen Sie dem ersten regulären Ausdruck hinzu , um Unterstützung für Tablets hinzuzufügen .Wie wäre es mit:
... da Smartphones diese Eigenschaft normalerweise unterstützen und Desktop-Browser dies nicht tun.
BEARBEITEN : Wie @Gajus betonte, ist diese Lösung jetzt veraltet und sollte nicht verwendet werden ( https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation ).
quelle
window.orientation
ist eine veraltete Eigenschaft ( developer.mozilla.org/en-US/docs/Web/API/Window/orientation , compatible.spec.whatwg.org/#dom-window-orientation ), die einige mobile Browser aus unbekannten Gründen unterstützen . Dieselben Browser implementierenwindow.screen.orientation
(was auch in Desktop-Browsern definiert ist). Ich kann nur davon ausgehen, dass dieswindow.orientation
aus alten Gründen dort verbleibt und daher nicht in neuen Anwendungen verwendet werden sollte.Wie benutzt man
So überprüfen Sie, ob sich der Benutzer auf einem bestimmten Mobilgerät befindet:
Ref: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript
Erweiterte Version auf Github: https://github.com/smali-kazmi/detect-mobile-browser
quelle
any()
eine for ... in Schleife von ORed-isMobile
Mitgliedern erstellen ?Hier ist eine einfache Lösung aus der Quelle der Schleuder von Facebook
quelle
Kam hierher auf der Suche nach einer einfachen, sauberen Möglichkeit, "Touchscreen-Geräte" zu erkennen, die ich als Mobilgeräte und Tablets klassifiziere. Ich habe in den aktuellen Antworten keine saubere Wahl gefunden, aber Folgendes herausgefunden, das möglicherweise auch jemandem hilft.
Bearbeiten : Um Desktops mit Touchscreen und Handys gleichzeitig zu unterstützen, können Sie Folgendes verwenden:
quelle
touchstart|end|etc
.navigator.maxTouchPoints
(keinms
Präfix). Es gibt auch einen MDN-Artikel zu überprüfen.Wie viele angegeben haben, ist es problematisch, sich auf das sich bewegende Ziel der Benutzeragentendaten zu verlassen. Gleiches gilt für die Zählung der Bildschirmgröße.
Mein Ansatz basiert auf einer CSS-Technik, um festzustellen, ob die Benutzeroberfläche berührungsempfindlich ist:
Wenn nur Javascript verwendet wird (Unterstützung durch alle modernen Browser), kann eine Medienabfrage leicht darauf schließen, ob das Gerät mobil ist .
quelle
Gemäß MDN-Artikel zur Browsererkennung mithilfe des Benutzeragenten wird empfohlen, diesen Ansatz nach Möglichkeit zu vermeiden und andere Möglichkeiten wie die Funktionserkennung vorzuschlagen.
Wenn man jedoch den Benutzeragenten als Mittel verwenden muss, um festzustellen, ob das Gerät mobil ist, schlagen sie vor:
Daher wird dieser Einzeiler ausreichen:
const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");
[AKTUALISIEREN]:
Wie @ zenw0lf in den Kommentaren vorschlägt, wäre die Verwendung eines regulären Ausdrucks besser:
const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)
quelle
.includes
nicht sopport von IE-11Mobile
in der User Agent StringIf 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).
const isMobile = /Mobi/.test(window.navigator.userAgent)
Es gibt keine perfekte Lösung, um festzustellen, ob JS-Code in einem mobilen Browser ausgeführt wird, aber die folgenden beiden Optionen sollten in den meisten Fällen funktionieren.
Option 1: Browser-Sniffing
Dieser spezielle Browser-Sniffing-Code ist der einer Bibliothek namens isMobile .
Option 2: Fensterorientierung
Testen Sie, ob
window.orientation
definiert ist:Hinweis
Nicht alle Touchscreen-Geräte sind mobil und umgekehrt. Wenn Sie also etwas speziell für den Touchscreen implementieren möchten, sollten Sie nicht testen, ob Ihr Browser auf einem mobilen Gerät ausgeführt wird, sondern ob das Gerät Touchscreen-Unterstützung bietet:
quelle
window.orientation
Lösung, aber die Dokumente sagen, dass sie veraltet ist! developer.mozilla.org/en-US/docs/Web/API/Window/orientationHier ist eine userAgent-Lösung, die effizienter ist als Match ...
quelle
/iphone|etc/i.test(navigator.userAgent)
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:
quelle
sessionStorage.desktop
es gibt sie weder in Safari noch in Chrome oder Firefox (alle neuesten Versionen zum Zeitpunkt der Veröffentlichung). Sie erhalten jedoch eine Gegenabstimmung, da Ihre Lösung in eine bessere Richtung geht als andere. Aber vergessen Sie nicht zu verwenden ,var mobile =
stattmobile =
.Die Funktionserkennung ist viel besser, als herauszufinden, auf welchem Gerät Sie sich befinden, und es ist sehr schwierig, mit neuen Geräten Schritt zu halten, die ständig herauskommen, wie in einer Bibliothek Modernizr informiert Sie darüber, ob eine bestimmte Funktion verfügbar ist oder nicht.
quelle
Wie wäre es mit so etwas?
quelle
screen.width
stattdessen verwenden? Es scheint mir, dass das zuverlässiger ist alswindow.matchMedia
.Sobald das Element den Fokus erhält, verwischen Sie es sofort. Der Bootstrap-Datepicker, eine sehr beliebte und gut gewartete Komponente mit fast 10.000 Sternen in GitHub, verwendet diesen Ansatz:
https://github.com/uxsolutions/bootstrap-datepicker
Danke an Tigger für die Unterstützung.
quelle
Eine wirklich gute Möglichkeit, mobile oder Tablet-Geräte zu erkennen, besteht darin, zu prüfen, ob der Browser ein Berührungsereignis erstellen kann.
Einfacher JavaScript-Code:
Das hat bei mir sehr gut funktioniert, aber es kann ein Problem mit Laptops geben, die über ein Touchscreen-Display verfügen.
Ich bin nicht sicher, ob ein Touchscreen-Laptop als mobiles Gerät erkannt wird, da ich ihn noch nicht getestet habe.
quelle
Hier ist meine überarbeitete Lösung für das Problem. Immer noch nicht perfekt. Die einzig wahre Lösung wäre, wenn die Gerätehersteller die Benutzeragentenzeichenfolgen "Mobile" und "Tablet" ernst nehmen.
Was passiert, wenn das Nexus 7-Tablet nur über die Android UA-Zeichenfolge verfügt? Zuerst wird das Mobile wahr, später wird auch das Tablet wahr, aber das Tablet löscht die Mobile UA-Zeichenfolge aus dem Body-Tag.
CSS:
alert
Linien für die Entwicklung hinzugefügt. Die Chrome-Konsole kann viele Handheld-Geräte emulieren. Dort testen.BEARBEITEN:
Verwenden Sie dies einfach nicht, sondern verwenden Sie stattdessen die Funktionserkennung. Es gibt so viele Geräte und Marken, dass die Ausrichtung auf eine Marke NIEMALS die richtige Lösung ist.
quelle
Ich rate Ihnen, http://wurfl.io/ zu besuchen.
Kurz gesagt, wenn Sie eine winzige JS-Datei importieren:
Sie erhalten ein JSON-Objekt, das wie folgt aussieht:
(vorausgesetzt, Sie verwenden natürlich ein Nexus 7) und Sie können Dinge tun wie:
Das ist was Sie suchen.
Haftungsausschluss: Ich arbeite für das Unternehmen, das diesen kostenlosen Service anbietet. Vielen Dank.
quelle
Hier ist ein Einzeiler
quelle
Kommt auf den Anwendungsfall an. Alle mobilen Geräte benötigen einen Akku. Wenn Sie nach Rechenleistung suchen, ohne die Batterie zu entladen, verwenden Sie die Batteriestatus-API :
Wenn Sie nach einer Präsentationsverwendung suchen
matchMedia
, die einen booleschen Wert zurückgibt:Oder kombinieren Sie sie für eine noch bessere Benutzererfahrung auf Tablet-Geräten.
quelle
Hier ist eine ECMAScript 6-Lösung (TypeScript bereit)
quelle
if
Bedingung zurückgeben, anstatt diese ganzecheck
Variable zu haben?Es gibt einen einfachen Trick, um festzustellen, ob es sich um ein mobiles Gerät handelt oder nicht. Überprüfen Sie einfach, ob das Ereignis ontouchstart vorhanden ist:
quelle
Ich habe einige Szenarien erlebt, in denen die obigen Antworten für mich nicht funktionieren. Also habe ich mir das ausgedacht. Könnte jemandem hilfreich sein.
Dies hängt von Ihrem Anwendungsfall ab. Wenn Sie sich auf die Verwendung des Bildschirms konzentrieren
screen.availWidth
, oderdocument.body.clientWidth
wenn Sie basierend auf dem Dokument rendern möchten.quelle
Das Beste muss sein:
Aber wie Yoav Barnea sagt ...
Nach diesen 3 Tests hoffe ich, dass var isMobile ... ok ist
quelle
Hier ist er voll funktionsfähig
quelle
Sie können diesem Tutorial auch folgen, um ein bestimmtes Mobiltelefon zu erkennen. Klicken Sie hier .
quelle
Mobile
Ihrem RXWas ist mit "window.screen.width"?
oder
Ich denke, das ist der beste Weg, denn es gibt jeden Tag ein neues mobiles Gerät!
(obwohl ich denke, dass es in alten Browsern nicht so unterstützt wird, aber probieren Sie es aus :))
quelle
Beachten Sie, dass die meisten Mobilgeräte der neueren Generation jetzt Auflösungen von mehr als 600 x 400 haben. dh ein iPhone 6 ....
Testnachweis: Die aktuellsten und aktuellsten Beiträge wurden hier ausgeführt. Eine optionale Prüfung wurde einmal wie folgt ausgeführt:
Irgendwie wurden die folgenden Ergebnisse in den folgenden Browser-Apps zurückgegeben. Technische Daten: iPhone 6S, iOS 10.3.1.
Safari (aktuell): Als Handy erkannt.
Chrome (aktuell): Es wurde nicht als Mobiltelefon erkannt.
Also habe ich dann den Vorschlag von Lanti ( https://stackoverflow.com/a/31864119/7183483 ) getestet und er lieferte die richtigen Ergebnisse (mobil für alle iOS-Geräte und Desktop für meinen Mac). Daher habe ich es ein wenig bearbeitet, da es zweimal ausgelöst wurde (sowohl für Handys als auch für Tablets). Beim Testen auf einem iPad fiel mir dann auf, dass es auch als Handy zurückkehrte, was sinnvoll ist, da die Parameter das Lantiverwendet überprüfen Sie das Betriebssystem mehr als alles andere. Aus diesem Grund habe ich einfach die Tablet-IF-Anweisung in den Mobile-Check verschoben, wodurch Mobile zurückgegeben wird, wenn der Tablet-Check negativ war, und das Tablet ansonsten. Ich habe dann die else-Klausel hinzugefügt, damit die mobile Prüfung als Desktop / Laptop zurückgegeben wird, da beide qualifiziert sind, aber dann festgestellt habe, dass der Browser die Marke CPU und OS erkennt. Also habe ich hinzugefügt, was dort als Teil der else if-Anweisung zurückgegeben wird. Um dies zu begrenzen, habe ich eine Warnhinweis hinzugefügt, falls nichts festgestellt wurde. Siehe unten, wird bald mit einem Test auf einem Windows 10-PC aktualisiert.
Oh, und ich habe auch eine 'debugMode'-Variable hinzugefügt, um einfach zwischen Debug und normalem Kompilieren zu wechseln.
Haftungsausschluss: Volle Anerkennung für Lanti , auch, dass dies nicht auf Windows-Tablets getestet wurde ... die möglicherweise Desktop / Laptop zurückgeben, da das Betriebssystem reines Windows ist. Werde nachsehen, wenn ich einen Freund finde, der einen benutzt.
quelle
Dies ist nur ein es6-Port der akzeptierten Antwort , die ich in meinem Projekt verwende. Beachten Sie, dass dies auch Tablets umfasst.
quelle
Wie wäre es damit, es erweitert die Antwort oben, überprüft aber auch die Bildschirmgröße
quelle
Verwenden von Regex (von detectmobilebrowsers.com ):
quelle
Dies könnte auch eine Lösung sein.
Wenn Sie beide Methoden verwenden, erhalten Sie eine perfekte Möglichkeit, verschiedene Geräte zu erkennen.
quelle