Adapting Websites Based on the User's Input Method

You want to adapt your website based on the user’s input method. A slider, for example, doesn’t need prominent left/right buttons if the user is swiping it anyway.

There’s quite a history behind this issue, and many people have already discussed it. If you want a more complete picture, read the following articles:

The reason for this long history of blog posts is that the problem is tricky. There’s no fully correct static answer. Devices can have multiple input methods at the same time. For example, there are laptops with touch screens, or you can connect a mouse to a tablet. The same device can be used differently, which means that looking at the device alone isn’t enough: you need to be aware of how the user is currently using the website.

There is one unavoidable gap, though: you can only react to how the user is currently using the website once interaction has actually happened.

Solution 2026

There’s still no perfect solution. But don’t let perfect be the enemy of good.

Media queries allow you to detect the user’s primary input method. There’s a matrix of possible values and how they relate to devices.

The DOM event pointerdown lets you detect the user’s current input method via PointerEvent.pointerType. The pointermove event can also be useful for immediately detecting mouse usage.

function pointerDownHandler(event: PointerEvent) {
  event.pointerType // can be 'mouse' | 'touch' | 'pen'
}
window.addEventListener('pointerdown', pointerDownHandler);

With this in hand, it’s up to you to decide how to adapt your website for a given case. To come back to the slider example, here’s how I’d approach it:

Initially, before any interaction has happened, I’d look at the device. If it’s a touch device (check the matrix), I’d hide the left/right buttons. As soon as interaction happens, that takes over as the source of truth. This will be fine for the majority of cases. If the initial assumption was wrong, the consequences are minor.

You might run into situations, though, where you need to weigh the consequences more carefully. Layout changes based on input method are one such case. Here, it can feel jarring to users if the layout shifts the moment they interact using an unexpected input method. So adaptations based on user input need to be evaluated on a case-by-case basis.

Conclusion

As you can see, this topic is not about a technical solution but about a design decision. As long as devices have multiple input methods and users switch between them, you will always have to consider the consequences of your adaptations.