Detecting that the browser has no mouse and is touch-only

javascript

responsive-design

touch-events

pointer-events

byAnton Shumikhin·Sep 5, 2024

Detect touch-only devices by using JavaScript with the window.matchMedia method and CSS media queries. Here's a quick example:

if (window.matchMedia("(pointer: coarse)").matches) {
  // Congrats! You've detected a touch-only device!
} else {
  // Sorry folks, this ain't a cowboy riding solo, we may have a mouse around! 
}

This snappy piece of code leverages the in-built browser features to check whether the primary input mechanism can correctly gauge at least 1mm of touch — typical of touchscreens.

Understanding device characteristics

Using media features in CSS4

Our dear friend pointer, a media feature in CSS4, can aid in detecting if a pointing device is present, and how sharp its aim is. The (pointer: none) media query gives you a heads up when no mouse is detected. However, double-check the browser support for these media features before you deploy that bad boy to production. You don't want your ship sinking before its maiden voyage!

The dynamic duo: Touch and mouse

Browsers these days are much like superhero outfits, always changing. Hence, some devices can be dual-wielding with a touchscreen and a mouse to boot. By monitoring the mousemove event, you can detect the presence and monitor the movement of a mouse, flagging its existence. Detecting touch is much the same, except here you're listening for events like touchstart and touchmove.

Who touched the screen first?

Simply detecting touch events can be misleading as a lot of modern laptops come equipped with touch screens and a trackpad. Instead, you'd want to note the user's initial interaction with your application and go from there. Wisely differentiate between touch and mouse capabilities to avoid any surprises!

Working with JavaScript for detection

Media Queries: Not just for CSS!

JavaScript isn't about to be left behind in the race for detection. Use window.matchMedia to check for support and monitor changes in media features. No one likes a static application!

// Is it a bird? Is it a plane? No, it's a mouse!
const hasMouse = window.matchMedia("(pointer: fine)").matches;

// Touchscreen? More like touch-queen!
const hasTouch = window.matchMedia("(pointer: coarse)").matches;

Separating the Mouse from the Touchscreen

Grouping together check functions like hasTouch() and hasMouse() abstracts tricky checks, making your code more reusable. Resolutely stand by feature detection rather than browser sniffing for a more accurate UX design.

Keeping an eye on change

Implement listenHasTouchChanges(callback) and listenHasMouseChanges(callback) listeners for any input changes. Your interface will thank you for making it responsive and dynamic!

Strategies and Challenges

Browser Support Check

Using W3C documentation is like using a compass; it won't break down that often. However, browser support is as reliable as the weather. Keep a polyfill handy for contingencies and ensure cross-browser compatibility.

Designing for Touch

In a touch landscape use larger touch targets and gesture-based interactions. Don't forget to keep those green performance metrics up by avoiding unnecessary layout changes.