JavaScript Navigator maxTouchPoints Property

What You’ll Learn

navigator.maxTouchPoints returns the maximum simultaneous touch contacts the device supports. Learn typical values (0 vs 5), multi-touch checks, gesture UI tips, five examples, and try-it labs.

Introduction

Touchscreens are not all equal. Some devices track one finger. Others track several at once (pinch-zoom, two-finger scroll, chorded gestures). Your UI should match that ability.

navigator.maxTouchPoints answers with a number: the maximum simultaneous touch contact points the hardware (as reported by the browser) can track. It comes from the Pointer Events family of APIs and is Baseline Widely available.

Understanding the maxTouchPoints Property

Think of it as “how many fingers can the screen track at the same time?”

• Value — a number (hardware-dependent).
• Typical desktop — 0 when there is no touchscreen.
• Typical phones — often 5 (Android / iOS per MDN).
• Multi-touch check — MDN uses maxTouchPoints > 1 for richer gestures.
• Baseline — Widely available across modern browsers (MDN, since about July 2020).

📝 Syntax

General form of the property:

navigator.maxTouchPoints

Value

• A number: the maximum simultaneous touch contact points supported by the current device.

Common patterns

// Read the count:
console.log(navigator.maxTouchPoints);

// MDN: offer complex multi-touch gestures when possible:
if (navigator.maxTouchPoints > 1) {
  // two/three-finger swipes, pinch-friendly UI…
} else {
  // drag / click / single-finger basics
}

const hasTouch = navigator.maxTouchPoints > 0;

Examples Gallery

Examples follow MDN navigator.maxTouchPoints patterns for reading capacity and branching on multi-touch. Prefer Try It Yourself to see your device’s reported count.

console.log(navigator.maxTouchPoints);
console.log("type: " + typeof navigator.maxTouchPoints);

0
type: number
(on a phone you might see 5 — your number will vary)

const n = navigator.maxTouchPoints;
let label = "no touchscreen (0 points)";
if (n === 1) label = "single-touch (1 point)";
else if (n > 1) label = "multi-touch (up to " + n + " points)";
console.log(label);

no touchscreen (0 points)
(or: multi-touch (up to 5 points))

if (navigator.maxTouchPoints > 1) {
  console.log("Offer complex gestures (two/three fingers)");
} else {
  console.log("Offer basic gestures (drag / click / one finger)");
}

Offer basic gestures (drag / click / one finger)
(on multi-touch devices: Offer complex gestures…)

function touchTier() {
  const n = navigator.maxTouchPoints || 0;
  let tier = "none";
  if (n === 1) tier = "single";
  else if (n > 1) tier = "multi";
  return {
    maxTouchPoints: n,
    tier: tier,
    allowPinchHints: tier === "multi"
  };
}

console.log(JSON.stringify(touchTier()));

{"maxTouchPoints":0,"tier":"none","allowPinchHints":false}

function interactionMode() {
  const points = navigator.maxTouchPoints || 0;
  const coarse = window.matchMedia("(pointer: coarse)").matches;
  return {
    maxTouchPoints: points,
    coarsePointer: coarse,
    mode: points > 1
      ? "multi-touch"
      : points === 1 || coarse
        ? "touch-friendly"
        : "pointer-first"
  };
}

console.log(JSON.stringify(interactionMode()));

{"maxTouchPoints":0,"coarsePointer":false,"mode":"pointer-first"}

🚀 Common Use Cases

• Gesture tiers — enable two-finger swipe / pinch hints only when > 1 (MDN pattern).
• Drawing / canvas apps — decide whether multi-touch painting or zoom is realistic.
• Maps & photo viewers — show “pinch to zoom” only on multi-touch devices.
• Games — map virtual controls to one finger vs multi-finger chords.
• Diagnostics — display reported touch capacity in a device info panel.

📝 Notes

• Baseline Widely available (MDN, since about July 2020).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Hardware-dependent: desktops often 0; many phones often 5.
• Defined in the Pointer Events specification.
• Related: mediaCapabilities, hardwareConcurrency, JavaScript hub.

💡 Best Practices