Touch-Geräte mit JavaScript erkennen

Die Erkennung von Touch-Eingaben klingt einfach, bis man vor einem Surface Pro, einem iPad mit Magic Keyboard oder einem Chromebook mit Touchscreen steht. Diese Hybrid-Geräte widerlegen die Annahme, dass „Touch” und „Maus” sich gegenseitig ausschließen – und genau hier scheitern die meisten Erkennungsansätze.

Dieser Artikel bringt es auf den Punkt: Was tatsächlich funktioniert, was nicht, und wann man auf die Touch-Erkennung ganz verzichten sollte.

Warum 'ontouchstart' in window nicht ausreicht

Jahrelang prüften Entwickler 'ontouchstart' in window als schnelle Methode zur Erkennung von Touch-Fähigkeit. Das Problem ist, dass Browser diese Eigenschaft inkonsistent bereitstellen. Einige Desktop-Browser unter Windows 8+ melden sie als true, selbst ohne Touchscreen. Chrome hat sein Verhalten über verschiedene Versionen hinweg geändert. Es ist ein unzuverlässiges Signal.

Sich allein auf ontouchstart zu verlassen bedeutet, dass man Browser-Verhalten erkennt, nicht die tatsächliche Hardware-Fähigkeit.

navigator.maxTouchPoints: Die zuverlässigere Grundlage

Die zuverlässigste JavaScript-Eigenschaft zur Erkennung von Touch-Unterstützung ist heute navigator.maxTouchPoints. Sie gibt die maximale Anzahl gleichzeitiger Touch-Kontaktpunkte zurück, die das Gerät unterstützt. Ein Wert größer als null bedeutet, dass die Hardware Touch-Fähigkeit meldet.

function hasTouchSupport() {
  return navigator.maxTouchPoints > 0
}

Dies ist Teil der Pointer Events-Spezifikation und wird von allen modernen Browsern unterstützt – Chrome, Firefox, Safari und Edge. Es ist sauber, lesbar und basiert nicht auf Event-Handler-Sniffing.

Hinweis: navigator.msMaxTouchPoints war das Äquivalent aus der IE-Ära. Sie benötigen es nicht, es sei denn, Sie pflegen Legacy-Code.

Wann CSS Pointer Media Queries das bessere Werkzeug sind

Für die meisten UI-Anpassungen benötigen Sie überhaupt kein JavaScript. CSS Pointer Media Queries ermöglichen es Ihnen, das Styling basierend auf der Präzision des primären Eingabegeräts anzupassen.

/* Zielt auf Geräte ab, bei denen der primäre Pointer grob ist (z.B. Finger) */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
  }
}

/* Zielt auf jeden verfügbaren Pointer ab, der grob ist, einschließlich sekundärer Eingaben */
@media (any-pointer: coarse) {
  .tooltip {
    display: none;
  }
}

/* Zielt auf Geräte ab, bei denen Hover nicht zuverlässig verfügbar ist */
@media (hover: none) {
  .dropdown:hover .menu {
    display: none;
  }
}

Der Unterschied zwischen pointer und any-pointer ist bei Hybrid-Geräten wichtig. pointer: coarse spiegelt nur die primäre Eingabe wider. any-pointer: coarse gibt true zurück, wenn irgendeine angeschlossene Eingabe grob ist – nützlich, wenn ein Gerät sowohl eine Maus als auch einen Touchscreen hat.

Pointer Events vs. Touch Events

Pointer Events sind das moderne, einheitliche Modell zur Behandlung von Maus-, Touch- und Stylus-Eingaben in JavaScript. Anstatt separate touchstart- und mousedown-Handler zu pflegen, schreiben Sie einen:

element.addEventListener('pointerdown', (e) => {
  if (e.pointerType === 'touch') {
    // Touch-Eingabe behandeln
  } else if (e.pointerType === 'mouse') {
    // Maus-Eingabe behandeln
  }
})

Die pointerType-Eigenschaft sagt Ihnen genau, was der Nutzer gerade jetzt tut – nicht, wozu sein Gerät theoretisch in der Lage ist. Dies ist die Unterscheidung, die auf Hybrid-Geräten am wichtigsten ist.

Legacy Touch Events (touchstart, touchmove, touchend) werden in den meisten Browsern noch unterstützt, sind aber nicht in allen Umgebungen verfügbar und decken keine Maus- oder Stylus-Eingaben ab. Bevorzugen Sie Pointer Events für neuen Code.

Das Hybrid-Geräte-Problem

Ein Nutzer an einem Touch-fähigen Laptop könnte eine Sitzung mit einer Maus beginnen und dann nach oben greifen und den Bildschirm antippen. Jede Erkennung, die Sie beim Seitenladen durchführen, ist bereits veraltet.

Anstatt ein einzelnes Erkennungsergebnis festzulegen, hören Sie auf pointerdown-Events und lesen Sie e.pointerType dynamisch. Dies ermöglicht es Ihnen, die UI basierend darauf anzupassen, was der Nutzer tatsächlich tut, nicht was sein Gerät theoretisch unterstützt.

Was wann verwenden

Fazit

Verzichten Sie vollständig auf User-Agent-Sniffing. Für UI-Anpassungen bewältigen CSS Pointer Media Queries die meisten Fälle ohne eine einzige Zeile JavaScript. Wenn Sie JavaScript benötigen, gibt Ihnen navigator.maxTouchPoints ein zuverlässiges Hardware-Signal, und die Pointer Events API liefert Ihnen Echtzeit-Eingabekontext. Zusammen decken sie die gesamte Bandbreite moderner Geräte ab – einschließlich der Hybrid-Geräte, die einfache Erkennung unzuverlässig machen.

FAQs

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.