Wie kann man ein Touchscreen-Gerät am besten mit JavaScript erkennen?

Question

Ich habe ein jQuery-Plug-in geschrieben, das sowohl auf dem Desktop als auch auf mobilen Geräten verwendet werden kann. Ich fragte mich, ob es eine Möglichkeit gibt, mit JavaScript zu erkennen, ob das Gerät Touchscreen-Fähigkeit hat. Ich verwende jquery-mobile.js, um die Touchscreen-Ereignisse zu erkennen, und es funktioniert auf iOS, Android usw., aber ich würde auch gerne bedingte Anweisungen schreiben, je nachdem, ob das Gerät des Benutzers einen Touchscreen hat.

Ist das möglich?

Answer 1

UPDATE 2021

Um die alten Antworten zu sehen: siehe die Historie. Ich habe mich entschlossen, einen Neuanfang zu machen, da es mir zu viel wurde, die Historie im Beitrag zu behalten.

Meine ursprüngliche Antwort besagte, dass es eine gute Idee sein könnte, die gleiche Funktion wie Modernizr zu verwenden, aber das ist nicht mehr gültig, da sie die "touchevents"-Tests in diesem PR entfernt haben: https://github.com/Modernizr/Modernizr/pull/2432 weil es ein verwirrendes Thema ist.

Damit sollte sich recht gut feststellen lassen, ob der Browser über "Touch-Fähigkeiten" verfügt:

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

Aber für fortgeschrittene Anwendungsfälle haben weitaus klügere Leute als ich über dieses Thema geschrieben, und ich würde empfehlen, diese Artikel zu lesen:

• Stu Cox: Man kann einen Touchscreen nicht erkennen
• Erkennen von Berührungen: Es geht um das "Warum", nicht um das "Wie
• Präsentation von Patrick H. Lauke zum Anfassen

Answer 2

Update: Bitte lesen Sie blmstr's Antwort bevor Sie eine ganze Bibliothek zur Feature-Erkennung in Ihr Projekt ziehen. Die Erkennung der tatsächlichen Touch-Unterstützung ist komplexer, und Modernizr deckt nur einen grundlegenden Anwendungsfall ab.

Modernizr ist eine großartige, leichtgewichtige Methode, um alle Arten von Merkmalen auf jeder Website zu erkennen.

Es fügt dem html-Element einfach Klassen für jedes Merkmal hinzu.

Sie können dann diese Funktionen leicht in CSS und JS ausrichten. Zum Beispiel:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

Und Javascript (Beispiel jQuery):

$('html.touch #popup').hide();

Answer 3

Seit der Einführung von Funktionen der Interaktionsmedien können Sie einfach tun:

if(window.matchMedia("(pointer: coarse)").matches) {
    // touchscreen
}

https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer

Update (aufgrund von Kommentaren): Die obige Lösung soll erkennen, ob ein "grober Zeiger" - normalerweise ein Touchscreen - das primäre Eingabegerät ist. Falls Sie feststellen wollen, ob ein Gerät mit z.B. einer Maus auch einen Touchscreen hat, können Sie folgendes verwenden any-pointer: coarse stattdessen.

Weitere Informationen finden Sie hier: Erkennen, dass der Browser keine Maus hat und nur auf Berührung reagiert

Answer 4

Da Modernizr den IE10 auf Windows Phone 8/WinRT nicht erkennt, gibt es eine einfache, browserübergreifende Lösung:

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

Sie müssen das nur einmal überprüfen, da das Gerät nicht plötzlich die Berührungsfunktion unterstützt oder nicht unterstützt, also speichern Sie es einfach in einer Variablen, damit Sie es effizienter mehrfach verwenden können.

Answer 5

Unter Verwendung aller oben genannten Kommentare habe ich den folgenden Code zusammengestellt, der für meine Bedürfnisse funktioniert:

var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0));

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.

Unter Windows Phone 7 funktioniert es derzeit nicht, und ich habe noch keine Lösung für diesen Browser finden können.

Ich hoffe, das ist für jemanden nützlich.