Ich habe ein jQuery-Plug-In geschrieben, das sowohl auf Desktop- als auch auf Mobilgeräten verwendet werden kann. Ich habe mich gefragt, ob es mit JavaScript eine Möglichkeit gibt, festzustellen, ob das Gerät über Touchscreen-Funktionen verfügt. Ich verwende jquery-mobile.js, um die Touchscreen-Ereignisse zu erkennen, und es funktioniert unter iOS, Android usw., aber ich möchte auch bedingte Anweisungen schreiben, die darauf basieren, ob das Gerät des Benutzers über einen Touchscreen verfügt.
Ist das möglich?
javascript
jquery
touch
screenm0nkey
quelle
quelle
Antworten:
Update: Bitte lesen Sie die Antwort von blmstr unten, bevor Sie eine ganze Feature-Erkennungsbibliothek in Ihr Projekt ziehen. Das Erkennen der tatsächlichen Touch-Unterstützung ist komplexer, und Modernizr deckt nur einen grundlegenden Anwendungsfall ab.
Modernizr ist eine großartige und einfache Möglichkeit, alle Arten der Feature-Erkennung an jedem Standort durchzuführen.
Es fügt dem HTML-Element einfach Klassen für jedes Feature hinzu.
Sie können diese Funktionen dann problemlos in CSS und JS ausrichten. Zum Beispiel:
Und Javascript (jQuery-Beispiel):
quelle
Modernizr.touch
unerwartet zurückkehrenundefined
, verfügen Sie möglicherweise über ein angepasstes Modernizr (das Sie auswählen können), das die Erkennung von Berührungsereignissen nicht unterstützt.Haben Sie versucht, diese Funktion zu verwenden? (Dies ist das gleiche wie bei Modernizr.)
UPDATE 1
document.createEvent("TouchEvent")
haben begonnen,true
in der neuesten Chrom (v. 17) zurückzukehren. Modernizr hat dies vor einiger Zeit aktualisiert. Überprüfen Sie den Modernizr-Test hier .Aktualisieren Sie Ihre Funktion folgendermaßen, damit sie funktioniert:
UPDATE 2
Ich habe festgestellt, dass das oben Genannte auf IE10 nicht funktioniert (auf MS Surface wird false zurückgegeben). Hier ist das Update:
UPDATE 3
'onmsgesturechange' in window
wird in einigen IE-Desktop-Versionen true zurückgeben, sodass dies nicht zuverlässig ist. Dies funktioniert etwas zuverlässiger:UPDATE 2018
Die Zeit vergeht und es gibt neue und bessere Möglichkeiten, dies zu testen. Grundsätzlich habe ich Modernizrs Methode zur Überprüfung extrahiert und vereinfacht:
Hier verwenden sie die nicht standardmäßige
touch-enabled
Medienabfragefunktion, die ich für etwas seltsam und schlecht halte. Aber hey, in der realen Welt funktioniert es wohl. In Zukunft (wenn sie von allen unterstützt werden) könnten diese Medienabfragefunktionen zu denselben Ergebnissen führen:pointer
undhover
.Schauen Sie sich die Quelle wie Modernizr es tun .
Einen guten Artikel, in dem die Probleme bei der Berührungserkennung erläutert werden, finden Sie unter: Stu Cox: Sie können einen Touchscreen nicht erkennen .
quelle
true
oder zurückzugebenfalse
. Sie können mehr darüber hier lesen: stackoverflow.com/questions/4686583/…in
Operator bereits einen Booleschen Wert ergibt .'onmsgesturechange'
wird auch bei Nicht-Touch-Geräten (PC) als wahr bewertet.window.navigator.msMaxTouchPoints
scheint genauer zu sein. Fand es hier .Da Modernizr IE10 unter Windows Phone 8 / WinRT nicht erkennt, ist eine einfache, browserübergreifende Lösung:
Sie müssen immer nur einmal prüfen, da das Gerät Touch nicht plötzlich unterstützt oder nicht mehr unterstützt. Speichern Sie es einfach in einer Variablen, damit Sie es mehrmals effizienter verwenden können.
quelle
return !!('ontouchstart' in window) || !!('msmaxtouchpoints' in window.navigator);
(um beide Antworten zu kombinieren) Funktioniert auch in IE10 einwandfrei!'onmsgesturechange' in window
Gibt auf dem IE10-Desktop true zurück, auch wenn eine Berührung möglich istfunction isTouchDevice() { return 'ontouchstart' in window || !!(navigator.msMaxTouchPoints);}
Unter Verwendung aller obigen Kommentare habe ich den folgenden Code zusammengestellt, der für meine Anforderungen funktioniert:
Ich habe dies auf iPad, Android (Browser und Chrome), Blackberry Playbook, iPhone 4s, Windows Phone 8, IE 10, IE 8, IE 10 (Windows 8 mit Touchscreen), Opera, Chrome und Firefox getestet.
Es schlägt derzeit unter Windows Phone 7 fehl und ich konnte noch keine Lösung für diesen Browser finden.
Hoffe, jemand findet das nützlich.
quelle
true
auf meinem Firefox 32 unter Windows 7 zurück :(Seit der Einführung von Interaktionsmedienfunktionen können Sie einfach Folgendes tun:
https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer
Update (aufgrund von Kommentaren): Die obige Lösung besteht darin, festzustellen, ob ein "Grobzeiger" - normalerweise ein Touchscreen - das primäre Eingabegerät ist. Wenn Sie feststellen möchten, ob ein Gerät mit z. B. einer Maus auch über einen Touchscreen verfügt, können Sie diesen verwenden
any-pointer: coarse
stattdessen verwenden.Weitere Informationen finden Sie hier: Erkennen, dass der Browser keine Maus hat und nur berührungsempfindlich ist
quelle
(pointer: coarse)
da Sie höchstwahrscheinlich nur auf die primäre Eingabe abzielen. Kann in der Produktion verwendet werden, da die wenigen nicht unterstützten Browser nur Desktop-Browser sind. Es gibt einen großartigen Artikel über CSS-Tricks .Ich mag dieses:
quelle
function isTouchDevice(){ return (window.ontouchstart !== undefined); }
var isTouch = 'ontouchstart' in window;
Dies funktioniert jedoch nicht mit dem neuesten Chrome (v31),var isTouch = 'createTouch' in window.document;
funktioniert immer noch.touchstart
Surface nur dann nicht als Touch-Gerät erkannt wird, da der IEpointer
stattdessen Ereignisse verwendet.Wenn Sie Modernizr verwenden , ist es
Modernizr.touch
wie bereits erwähnt sehr einfach zu verwenden .Ich bevorzuge jedoch eine 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
/(iphone|ipod|ipad|android|iemobile|blackberry|bada)/.test(window.navigator.userAgent.toLowerCase())
Wir haben die Modernizr-Implementierung ausprobiert, aber das Erkennen der Berührungsereignisse ist nicht mehr konsistent (IE 10 verfügt über Berührungsereignisse auf dem Windows-Desktop, IE 11 funktioniert, da Berührungsereignisse gelöscht und eine Zeiger-API hinzugefügt wurden).
Deshalb haben wir uns entschlossen, die Website als Touch-Site zu optimieren, solange wir nicht wissen, welchen Eingabetyp der Benutzer hat. Dies ist zuverlässiger als jede andere Lösung.
Unsere Untersuchungen haben ergeben, dass sich die meisten Desktop-Benutzer vor dem Klicken mit der Maus über den Bildschirm bewegen, damit wir sie erkennen und das Verhalten ändern können, bevor sie auf etwas klicken oder den Mauszeiger bewegen können.
Dies ist eine vereinfachte Version unseres Codes:
quelle
Geige arbeiten
Ich habe es so erreicht;
quelle
Es gibt etwas Besseres als zu überprüfen, ob sie einen Touchscreen haben, zu überprüfen, ob sie ihn verwenden, und das ist einfacher zu überprüfen.
quelle
Dieser funktioniert auch in Windows Surface Tablets gut !!!
quelle
Ich habe Teile des obigen Codes verwendet, um festzustellen, ob eine Berührung vorliegt, sodass meine Fancybox-Iframes auf Desktop-Computern und nicht bei Berührung angezeigt werden. Ich habe festgestellt, dass Opera Mini für Android 4.0 sich immer noch als Non-Touch-Gerät registriert, wenn nur der Code von blmstr verwendet wird. (Weiß jemand warum?)
Am Ende habe ich verwendet:
quelle
/iPhone|iPod|iPad|Android|BlackBerry/
?Das größte Problem beim Versuch, Berührungen zu erkennen, sind Hybridgeräte, die sowohl Berührungen als auch das Trackpad / die Maus unterstützen. Selbst wenn Sie richtig erkennen können, ob das Gerät des Benutzers Touch unterstützt, müssen Sie wirklich erkennen, welches Eingabegerät der Benutzer gerade verwendet. Hier finden Sie eine detaillierte Beschreibung dieser Herausforderung und eine mögliche Lösung .
Grundsätzlich besteht der Ansatz, um herauszufinden, ob ein Benutzer gerade den Bildschirm berührt oder stattdessen eine Maus / ein Trackpad verwendet hat, darin, sowohl ein
touchstart
als auch einmouseover
Ereignis auf der Seite zu registrieren :Eine Berührungsaktion löst beide Ereignisse aus, wobei erstere (
touchstart
) auf den meisten Geräten immer an erster Stelle steht. Wenn Sie sich also auf diese vorhersehbare Abfolge von Ereignissen verlassen, können Sie einen Mechanismus erstellencan-touch
, der dem Dokumentstamm dynamisch eine Klasse hinzufügt oder daraus entfernt , um den aktuellen Eingabetyp des Benutzers zu diesem Zeitpunkt im Dokument wiederzugeben:Weitere Details hier .
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
Ich würde es vermeiden, die Bildschirmbreite zu verwenden, um festzustellen, ob ein Gerät ein Touch-Gerät ist. Es gibt Touchscreens, die viel größer als 699px sind, denken Sie an Windows 8. Navigatior.userAgent kann hilfreich sein, um falsche Postives zu überschreiben.
Ich würde empfehlen, dieses Problem auf Modernizr zu überprüfen .
Möchten Sie testen, ob das Gerät Berührungsereignisse unterstützt oder ein Berührungsgerät ist? Leider ist das nicht dasselbe.
quelle
Nein, es ist nicht möglich. Die hervorragenden Antworten sind immer nur teilweise, da jede Methode falsch positive und falsch negative Ergebnisse liefert. Selbst der Browser weiß aufgrund von Betriebssystem-APIs nicht immer, ob ein Touchscreen vorhanden ist, und die Tatsache kann sich während einer Browsersitzung ändern, insbesondere bei Vereinbarungen vom Typ KVM.
Weitere Details finden Sie in diesem ausgezeichneten Artikel:
http://www.stucox.com/blog/you-cant-detect-a-touchscreen/
Der Artikel schlägt vor, dass Sie die Annahmen, die Sie dazu veranlassen, Touchscreens zu erkennen, überdenken. Sie sind wahrscheinlich falsch. (Ich habe meine eigene App überprüft und meine Annahmen waren in der Tat falsch!)
Der Artikel schließt:
quelle
Viele dieser Funktionen erfordern jedoch entweder jQuery oder Javascript-Linters beschweren sich über die Syntax. In Anbetracht Ihrer ersten Frage, die nach einer "JavaScript" -Methode (nicht jQuery, nicht Modernizr) zur Lösung dieses Problems fragt, finden Sie hier eine einfache Funktion, die jedes Mal funktioniert. Es ist auch so minimal wie möglich.
Ein letzter Vorteil, den ich erwähnen möchte, ist, dass dieser Code Framework- und Geräteunabhängig ist. Genießen!
quelle
function isTouchScreen() { return window.matchMedia('(hover: none)').matches;}
Dies hat bei mir funktioniert, daher füge ich hier einen Beitrag zu dieser Antwort hinzu, da ich auch einen Vanille-JS-Thread erwartet hatte, als Google mich hierher brachte.Es sieht so aus, als ob Chrome 24 jetzt Touch-Ereignisse unterstützt, wahrscheinlich für Windows 8. Der hier veröffentlichte Code funktioniert also nicht mehr. Anstatt zu erkennen, ob Touch vom Browser unterstützt wird, binde ich jetzt sowohl Touch- als auch Click-Ereignisse und stelle sicher, dass nur eines aufgerufen wird:
Und dann nenne es:
Hoffe das hilft !
quelle
Alle unterstützten Browser außer Firefox für den Desktop sind immer WAHR, da Firefox für den Desktop reaktionsschnelles Design für Entwickler bietet, selbst wenn Sie auf den Touch-Button klicken oder nicht!
Ich hoffe, Mozilla wird dies in der nächsten Version beheben.
Ich verwende den Firefox 28-Desktop.
quelle
true
:(jQuery v1.11.3
Die Antworten enthalten viele gute Informationen. Aber in letzter Zeit habe ich viel Zeit damit verbracht, alles zu einer funktionierenden Lösung zusammenzufügen, um zwei Dinge zu erreichen:
Neben diesem Beitrag und dem Erkennen von Touchscreen-Geräten mit Javascript fand ich diesen Beitrag von Patrick Lauke äußerst hilfreich: https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how /.
Hier ist der Code ...
Wichtig! Die
*.on( events [, selector ] [, data ], handler )
Methode muss über einen Selektor verfügen, normalerweise ein Element, das das "Touchstart" -Ereignis oder ein ähnliches Ereignis, das mit Berührungen verbunden ist, verarbeiten kann. In diesem Fall ist es das Hyperlink-Element "a".Jetzt müssen Sie nicht mehr mit dem normalen Mausklick in JavaScript umgehen, da Sie CSS verwenden können, um diese Ereignisse mithilfe von Selektoren für das Hyperlink-Element "a" wie folgt zu behandeln:
Hinweis: Es gibt auch andere Selektoren ...
quelle
oder
wäre wohl eine gründlichere Überprüfung.
quelle
ua
sich darauf beziehtnavigator.userAgent
. Auch die Erkennung anhand der Bildschirmbreite kann zu falschen Ergebnissen führen, wenn jemand einen Browser im Nicht-Vollbildmodus öffnet.Ich benutze:
in jQuery Mobile 1.0.1
quelle
Ich hatte auch große Probleme mit verschiedenen Optionen, um in Javascript zu erkennen, ob die Seite auf einem Touchscreen-Gerät angezeigt wird oder nicht. IMO gibt es derzeit keine echte Option, um die Option richtig zu erkennen. Browser melden entweder Berührungsereignisse auf Desktop-Computern (da das Betriebssystem möglicherweise berührungsbereit ist), oder einige Lösungen funktionieren nicht auf allen Mobilgeräten.
Am Ende wurde mir klar, dass ich von Anfang an den falschen Ansatz verfolgte: Wenn meine Seite auf Touch- und Non-Touch-Geräten ähnlich aussehen sollte, sollte ich mir möglicherweise überhaupt keine Gedanken über die Erkennung der Eigenschaft machen müssen: Mein Szenario war um Tooltips über Schaltflächen auf Touch-Geräten zu deaktivieren, da diese zu Doppelklicks führen, bei denen ich ein einziges Tippen wollte, um die Schaltfläche zu aktivieren.
Meine Lösung war, Umgestalten der Ansicht , so dass kein Tooltip über eine Schaltfläche benötigt wurde, und am Ende habe ich nicht brauchen , das Touch - Gerät von Javascript mit Methoden zu erkennen , dass alle ihre Nachteile haben .
quelle
Sie können den Modernizer installieren und ein einfaches Touch-Ereignis verwenden. Dies ist sehr effektiv und funktioniert auf jedem Gerät, auf dem ich es getestet habe, einschließlich der Windows-Oberfläche!
Ich habe eine jsFiddle erstellt
quelle
Die praktische Antwort scheint eine zu sein, die den Kontext berücksichtigt:
1) Öffentliche Site (kein Login)
Codieren Sie die Benutzeroberfläche, um mit beiden Optionen zusammenzuarbeiten.
2)
Anmeldeseite Erfassen Sie, ob im Anmeldeformular eine Mausbewegung aufgetreten ist, und speichern Sie diese in einer versteckten Eingabe. Der Wert wird mit den Anmeldeinformationen übergeben und der Sitzung des Benutzers hinzugefügt , sodass er für die Dauer der Sitzung verwendet werden kann.
Jquery, die nur zur Anmeldeseite hinzugefügt werden soll:
(+1 an @ Dave Burt und +1 an @ Martin Lantzsch über ihre Antworten)
quelle
Das Problem
Aufgrund von Hybridgeräten, die eine Kombination aus Touch- und Mauseingabe verwenden, müssen Sie in der Lage sein , den Status / die Variable dynamisch zu ändern, mit der gesteuert wird, ob ein Code ausgeführt werden soll, wenn der Benutzer ein Touch-Benutzer ist oder nicht.
Touch-Geräte werden auch
mousemove
beim Tippen ausgelöst.Lösung
touchstart
Ereignis ausgelöst wird, und setzen Sie es dann auf true.Getestet auf Safari iOS und Chrome für Android.
Hinweis: Nicht 100% sicher bei den Zeigerereignissen für MS Surface usw.
Codepen-Demo
quelle
Eigentlich habe ich diese Frage recherchiert und alle Situationen berücksichtigt. weil es auch bei meinem Projekt ein großes Problem ist. Damit ich die folgende Funktion erreiche, funktioniert sie für alle Versionen aller Browser auf allen Geräten:
Hinweis : Auf jeden Fall gibt das
isTouchDevice
nurboolean
Werte zurück.quelle
Umfang jQuery-
support
Objekt:Und jetzt können Sie es überall überprüfen, wie folgt:
quelle
Das scheint für mich bisher gut zu funktionieren:
quelle
Wenn eine Maus angebracht ist, kann mit einer ziemlich hohen Trefferquote (ich würde praktisch 100% sagen) davon ausgegangen werden, dass der Benutzer die Maus mindestens einen winzigen Abstand bewegt, nachdem die Seite fertig ist - ohne zu klicken. Der folgende Mechanismus erkennt dies. Wenn dies erkannt wird, betrachte ich dies als Zeichen für fehlende Touch-Unterstützung oder, falls unterstützt, als von untergeordneter Bedeutung, wenn eine Maus verwendet wird. Touch-Gerät wird angenommen, wenn es nicht erkannt wird.
BEARBEITEN Dieser Ansatz ist möglicherweise nicht für alle Zwecke geeignet. Es kann verwendet werden, um Funktionen zu steuern, die basierend auf der Benutzerinteraktion auf der geladenen Seite aktiviert werden, z. B. ein Bildbetrachter. Der folgende Code lässt das Mausbewegungsereignis auch auf Geräten ohne Maus gebunden, da es jetzt auffällt. Andere Ansätze können besser sein.
In etwa geht es so (Entschuldigung für jQuery, aber ähnlich in reinem Javascript):
quelle