Detecting Touchscreen Capability in JavaScript

Understanding Touchscreen Detection

Modern web development often requires adapting user interfaces based on the device being used. A crucial aspect of this is determining whether a device has touchscreen capability. This allows you to provide a more intuitive and user-friendly experience, especially for mobile devices. While perfect touchscreen detection is surprisingly complex, several reliable JavaScript techniques can help you achieve this.

Why is Touchscreen Detection Tricky?

Historically, identifying touchscreen devices wasn’t straightforward. User-agent strings, once a common approach, are easily spoofed and unreliable. Modern browsers also strive to minimize the information they expose for privacy reasons. Therefore, the most effective methods focus on feature detection – checking for the presence of specific browser APIs related to touch events – rather than attempting to identify the device itself.

Feature Detection: The Core Technique

The fundamental principle behind reliable touchscreen detection is to check for the existence of properties or APIs that are only available when the browser supports touch interactions. Let’s explore several methods.

ontouchstart Property

The simplest and often most effective method is to check for the ontouchstart property on the window object. This property is present in browsers that support touch events.

function isTouchDevice() {
  return 'ontouchstart' in window;
}

if (isTouchDevice()) {
  // The device supports touch input
  console.log("Touch device detected!");
} else {
  // The device does not support touch input (or touch events are not enabled)
  console.log("Touch device not detected.");
}

This approach is concise and generally reliable across a wide range of browsers and devices.

navigator.maxTouchPoints and navigator.msMaxTouchPoints

Another common method involves checking the navigator.maxTouchPoints and navigator.msMaxTouchPoints properties. These properties indicate the maximum number of simultaneous touch points the browser supports.

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

navigator.msMaxTouchPoints is primarily used for older versions of Internet Explorer (specifically, those on Windows Phone 8). Using all three checks provides broader compatibility.

Utilizing Media Queries with pointer: coarse

Modern CSS media queries offer a more declarative way to detect coarse pointers, which typically indicate touch input. While designed for CSS, you can use JavaScript to evaluate these media queries.

function isTouchDevice() {
  return window.matchMedia("(pointer: coarse)").matches;
}

This approach leverages the browser’s built-in media query engine, offering a potentially cleaner and more performant solution. The any-pointer: coarse variant is also available to detect whether a coarse pointer is any of the primary input devices.

Caching the Result

Since a device’s touchscreen capability doesn’t change during a session, it’s best to cache the result of your detection function for performance.

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

// Now you can use isTouchDevice throughout your application
if (isTouchDevice) {
  // Do something specific for touch devices
}

Using an immediately invoked function expression (IIFE) ensures that the detection logic is executed only once, and the result is stored in the isTouchDevice variable for reuse.

Considerations and Best Practices

• Feature Detection over User-Agent Sniffing: Always prioritize feature detection techniques over relying on user-agent strings, which are unreliable and can be easily spoofed.
• Caching: Cache the result of your detection function to avoid redundant calculations.
• Progressive Enhancement: Design your website with progressive enhancement in mind. Ensure that your content and functionality are accessible to all users, regardless of their input method.
• Testing: Thoroughly test your touchscreen detection logic across a variety of devices and browsers.