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- $.browser
Funktion ist nicht das, wonach ich suche.
javascript
jquery
mobile
browser-detection
superUntitled
quelle
quelle
Antworten:
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:
Oder Sie können beide kombinieren, um den Zugriff über jQuery zu erleichtern ...
Jetzt
$.browser
wird"device"
für alle oben genannten Geräte zurückkehrenHinweis:
$.browser
auf entfernt jQuery v1.9.1 . Sie können dies jedoch verwenden, indem Sie den Code des jQuery-Migrations-Plugins verwendenEine gründlichere Version:
quelle
.This.Is.A.Bad.Idea.
Für mich ist klein schön, also benutze ich diese Technik:
In der CSS-Datei:
In der jQuery / JavaScript-Datei:
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):
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:
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.
quelle
screen.width
Eigenschaft 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_mobile
wird er nicht aktualisiert.if( screen.width <= 480 ) { // is mobile }
width
Attributwert IIRC. Daher wird ein Retina iPhone eine hatwidth
von640
und eine Höhe von960
im Hoch- und einwidth
von960
und eine Höhe von640
in der Landschaft.window.matchMedia
: developer.mozilla.org/en-US/docs/Web/API/Window.matchMediaLaut Mozilla - Browsererkennung mit dem User Agent :
So was:
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
Android
als Benutzeragent zu testen , da die Zeichenfolge des Chrome-Benutzeragenten für Tablets nicht "Mobi" enthält (die Telefonversionen jedoch):quelle
/Mobi/i.test(navigator.userAgent)
jedoch, da test () einen Booleschen Wert zurückgibt./Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
Ein einfacher und effektiver Einzeiler:
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 :
quelle
isMobile
Ihnen bereitgestellte Funktion kehrttrue
auf meinem Destop-Gerät zurück !! (Google Chrome v44.0)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.
quelle
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 :)
quelle
|android|ipad|playbook|silk
wie im Abschnitt "Über" beschrieben (es istManchmal 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:
Diese Lösung stammt von Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/
quelle
Eine Lösung gefunden in: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .
Und um zu überprüfen, ob es sich um ein Mobiltelefon handelt, können Sie Folgendes testen:
quelle
Wenn mit "mobil" "kleiner Bildschirm" gemeint ist, verwende ich Folgendes:
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.
quelle
Wenn Sie Modernizr verwenden , ist es
Modernizr.touch
wie bereits erwähnt sehr einfach zu verwenden .Ich bevorzuge jedoch die Verwendung einer Kombination aus
Modernizr.touch
und Testen von Benutzeragenten, um sicher zu gehen.Wenn Sie Modernizr nicht verwenden, können Sie die
Modernizr.touch
obige Funktion einfach durch ersetzen('ontouchstart' in document.documentElement)
Beachten Sie außerdem, dass Sie durch das Testen des Benutzeragenten
iemobile
eine größere Auswahl an erkannten Microsoft-Mobilgeräten erhalten alsWindows Phone
.Siehe auch diese SO-Frage
quelle
TouchEvent.supported
.('ontouchstart' in window)
ist auch eine AlternativeModernizr.touch
zu hacks.mozilla.org/2013/04/…|
anstelle vieler Übereinstimmungen verwenden. Sie brauchen das auch nicht,toLowerCase()
weil Sie deni
Modifikator haben. Hier:var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
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 einfachscreen.width
kleine Geräte erkannt. Leider gibt es in einigen Android-Versionen einen Fehler mit screen.width. Sie können diese Methode mit dem userAgent kombinieren:quelle
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:
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:
Nachdem wir die Funktion eingerichtet haben, können wir sie aufrufen und den Wert speichern:
Ihre Frage war
Nachdem wir nun die Geräteinformationen haben, bleibt nur noch eine if-Anweisung:
Hier ist ein Beispiel für CodePen: http://codepen.io/jacob-king/pen/jWEeWG
quelle
Small Devices range from 768 to 991 pixels.
dies bedeutet, es sollte seinwindow.innerWidth < 992
(991 ist enthalten) das gleiche für 1199 sollte es stattdessen <1200 seinIn einer Zeile Javascript:
Wenn der Benutzeragent 'Mobi' enthält (gemäß MDN) und ontouchstart verfügbar ist, handelt es sich wahrscheinlich um ein mobiles Gerät.
quelle
/Mobi/.test(navigator.userAgent)
...match
hat es nicht für michIch 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):
Wenn Sie die Tablets ebenfalls erkennen müssen, lesen Sie einfach den Abschnitt Info, um weitere RegEx-Parameter zu erhalten.
quelle
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.
quelle
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
Wenn festgestellt wird, dass nur eine Überprüfung
navigator.userAgent
nicht immer zuverlässig ist. Eine höhere Zuverlässigkeit kann auch durch Überprüfung erreicht werdennavigator.platform
. Eine einfache Änderung einer vorherigen Antwort scheint besser zu funktionieren:quelle
Ich rate Ihnen, http://wurfl.io/ zu besuchen.
Kurz gesagt, wenn Sie eine winzige JavaScript-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.
quelle
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:
quelle
'ontouchstart' in document.documentElement
ist wahrscheinlich ein besserer Test für die Touch-Unterstützung alswindow.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.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.
quelle
for
! + Sie haben vergessen, ein RegExp zu erstellen. Hier ist eine einfachere:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
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
$.browser
und$.support
stattdessen verwendet).Um Mobiltelefone zu erkennen, können Sie nach Berührungsereignissen suchen:
Entnommen aus Wie lässt sich ein Touchscreen-Gerät am besten mit JavaScript erkennen?
quelle
true
auf Desktop-PCs mit Touchscreen trotzdem zurück . stucox.com/blog/you-cant-detect-a-touchscreenIch 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
Mobi
empfohlen. Einige der alten Tablets geben jedoch nicht true zurück, wenn sie nurMobi
verwendet werden. Daher sollten wir auchTablet
Zeichenfolgen verwenden.In ähnlicher Weise für auf der sicheren Seite zu sein
iPad
undiPhone
könnte auch Art , das Gerät zu überprüfen verwendet werden Strings.Die meisten neuen Geräte würden nur
true
fürMobi
Zeichenfolgen zurückgegeben.quelle
quelle
window.matchMedia("(pointer:coarse)").matches;
von einer anderen Antwort gelöst.Tolle Antwort, danke. Kleine Verbesserung zur Unterstützung von Windows Phone und Zune:
quelle
if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
Benutze das:
Dann benutze dies:
quelle
Einfache Funktion basierend auf http://detectmobilebrowser.com/
quelle
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.
quelle
ich benutze das
quelle
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.
quelle
Benutzeragentenzeichenfolgen sollten nicht allein als vertrauenswürdig eingestuft werden. Die folgende Lösung funktioniert in allen Situationen.
und rufen Sie diese Funktion auf:
quelle