navigator.maxTouchPoints is a read-only Navigator property that returns a number: the maximum count of simultaneous touch contact points the current device supports (MDN / Pointer Events).
Read the notes below before you rely on this property. Prefer feature detection when support is limited.
Use navigator.maxTouchPoints. Start with this line.
navigator.maxTouchPoints| Call | What it does |
|---|---|
navigator.maxTouchPoints | Primary signature. |
Built into the browser. Read navigator.maxTouchPoints on Navigator — no import required.
navigator.maxTouchPoints| Parameter | Description |
|---|---|
| matchMedia | Optional. Coarse pointer / touch-friendly layout |
| Return Value | Description |
|---|---|
| * | The current value of navigator.maxTouchPoints. |
Log navigator.maxTouchPoints and confirm it is a number.
console.log(navigator.maxTouchPoints);
console.log("type: " + typeof navigator.maxTouchPoints);typeof should be "number".0; phones often show 5.Turn the count into a short none / single / multi label.
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);0 is the common desktop case.Offer complex gestures only when the device tracks more than one point.
let msg;
if (navigator.maxTouchPoints > 1) {
msg = "Offer complex gestures (two/three fingers)";
} else {
msg = "Offer basic gestures (drag / click / one finger)";
}
console.log(msg);
console.log("maxTouchPoints: " + navigator.maxTouchPoints);> 1 means multi-touch capable.Build a small none / single / multi summary for feature flags.
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(), null, 2));|| 0. Keeps math safe if the value is ever falsy."multi".Combine maxTouchPoints with (pointer: coarse) for a simple UI mode.
function interactionMode() {
const points = navigator.maxTouchPoints || 0;
const coarse = window.matchMedia("(pointer: coarse)").matches;
let mode;
if (points > 1) mode = "multi-touch";
else if (points === 1 || coarse) mode = "touch-friendly";
else mode = "pointer-first";
return {
maxTouchPoints: points,
coarsePointer: coarse,
mode: mode
};
}
console.log(JSON.stringify(interactionMode(), null, 2));matchMedia("(pointer: coarse)") hints at finger-sized targets.navigator.maxTouchPoints is Baseline Widely available (MDN). Evergreen browsers have shipped it since about July 2020.
Supported in modern Chrome, Firefox, Safari, Edge, and Opera. Value is hardware-dependent (often 0 on non-touch desktops).
Bottom line: Safe for modern web apps. Branch on the number (0 / 1 / >1) and keep mouse/pointer UX available when the count is 0.
Learn how navigator.mediaCapabilities reports decode and encode support.
10 people found this page helpful