Navigator.maxTouchPoints — Eigenschaft · JavaScript-Referenz

Signatur

Navigator.maxTouchPoints

Beschreibung

Die schreibgeschützte Eigenschaft navigator.maxTouchPoints gibt eine Ganzzahl zurück. Sie sagt, wie viele Finger oder Stifte das aktuelle Gerät höchstens gleichzeitig erkennen kann. Ein Smartphone meldet meist 5 oder 10. Ein Desktop-Rechner ohne Touchscreen meldet 0.

Oft wird die Eigenschaft genutzt, um festzustellen, ob überhaupt Touch-Eingaben möglich sind (maxTouchPoints > 0). Sie ist zuverlässiger als die ältere Prüfung 'ontouchstart' in window. Außerdem kann man damit Mehrfinger-Gesten wie Zoomen mit zwei Fingern oder Drehen nur dann anbieten, wenn das Gerät genug Kontaktpunkte unterstützt.

Wichtig: Der Wert beschreibt, was die Hardware kann. Er sagt nicht, womit die Person gerade tatsächlich arbeitet. Viele Geräte haben Touchscreen und Maus, zum Beispiel Convertible-Laptops oder ein iPad mit Tastatur. Für die Gestaltung der Oberfläche eignen sich deshalb CSS-Media-Queries wie (pointer: coarse) und (hover: none) oft besser. Einzelne Eingaben unterscheidet man am besten über PointerEvent.pointerType.

Rückgabewert

Typ

number

Beschreibung

Nicht-negative Ganzzahl: die höchste Zahl gleichzeitiger Berührungspunkte. 0 bedeutet, dass das Gerät keine Touch-Eingabe unterstützt.

Beispiele

Touch-Unterstützung erkennen

const hatTouch = navigator.maxTouchPoints > 0;

console.log(`Max. Touchpunkte: ${navigator.maxTouchPoints}`);
console.log(hatTouch ? 'Touch-Gerät erkannt' : 'Kein Touchscreen');

// CSS-Klasse für angepasste Stile setzen
document.documentElement.classList.toggle('touch', hatTouch);

Max. Touchpunkte: 10 Touch-Gerät erkannt

Mehrfinger-Gesten nur bei ausreichender Unterstützung aktivieren

const karte = document.querySelector('#karte');

if (navigator.maxTouchPoints >= 2) {
  const aktivePointer = new Map();

  karte.addEventListener('pointerdown', (e) => aktivePointer.set(e.pointerId, e));
  karte.addEventListener('pointerup', (e) => aktivePointer.delete(e.pointerId));
  karte.addEventListener('pointercancel', (e) => aktivePointer.delete(e.pointerId));
  karte.addEventListener('pointermove', (e) => {
    if (aktivePointer.size === 2) {
      console.log('Pinch-Geste läuft');
    }
  });
} else {
  // Ersatz: Zoom-Buttons einblenden
  document.querySelector('#zoom-buttons').hidden = false;
}

Mit Media Queries kombinieren (Hybridgeräte)

const eingabeProfil = () => ({
  touchFaehig: navigator.maxTouchPoints > 0,
  grobeZeigerPrimaer: matchMedia('(pointer: coarse)').matches,
  hoverMoeglich: matchMedia('(hover: hover)').matches,
});

console.log(eingabeProfil());
// Convertible-Laptop mit Maus: touchfähig, aber feiner Zeiger + Hover

{ touchFaehig: true, grobeZeigerPrimaer: false, hoverMoeglich: true }

// Wichtig · Fallstricke

Hybridgeräte: Ist maxTouchPoints > 0, heißt das nicht, dass keine Maus angeschlossen ist. Blende Hover-Funktionen deshalb nicht allein wegen dieses Werts aus.
iPadOS 13 und neuer: Safari gibt sich dort als macOS-Desktop aus. navigator.maxTouchPoints > 1 zusammen mit navigator.platform === 'MacIntel' ist der übliche Umweg, um ein iPad zu erkennen. Das ist ein Workaround, auf den man sich nicht fest verlassen sollte.
Entwicklertools: Die Geräte-Emulation in Chrome oder Firefox verändert den Wert. Beim Testen können dadurch andere Werte erscheinen als auf echter Hardware.
Veraltet: Nutze statt des alten navigator.msMaxTouchPoints (IE10/11) die standardisierte Eigenschaft.
Datenschutz: Der Wert trägt zum Browser-Fingerprinting bei. Manche Browser mit Schutz gegen Fingerprinting geben deshalb vereinheitlichte Werte zurück.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt (Chrome 35+, Firefox 59+, Safari 13+, Edge). In älteren Umgebungen ist der Wert undefined. Vergleiche mit > 0 liefern dann false.

Siehe auch

Navigator PointerEvent PointerEvent.pointerType TouchEvent Window.matchMedia() Navigator.userAgent NavigationTransition.committed