touch

You Can’t Detect A Touchscreen

Stu Cox explains that there are a ton of ways you might think you can get a yes-or-no answer on whether a browser supports touch or not:

  • Width media queries
  • Touch-related DOM events
  • Touch-related APIs
  • Pointer media queries

The normal refrain around this is "there are devices that are both, so you'd be wrong on those," which is true, but it's actually more problematic than that. These testing methods are often just straight up wrong.

So:

For layouts, assume everyone has a touchscreen. Mouse users can use large UI controls much more easily than touch users can use small ones. The same goes for hover states.

For events and interactions, assume anyone may have a touchscreen. Implement keyboard, mouse and touch interactions alongside each other, ensuring none block each other.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag