How can I detect the existence of a mouse in a web site?

Question

On a web site I'm building, I've got a set of navigation buttons that needs to be large to look nice and be easily clickable, but needs to be small when the user isn't navigating. So in my UI, I shrink the buttons down to a thumbnail, and on mouse hover I animate it to full size. This works well.

But on tablets, there's no mouse, and no mouse hover, and so I need another mechanism for letting users navigate. I was thinking of letting the user tap on the thumbnail, then expanding the full nav button bar, and then the user can tap to navigate.

The question is: how can I tell if the user is browsing with no mouse? I guess I could browser detect, but this seems really flaky.

Alternatively, can someone point me to a better UI design pattern for this situation?

Answer 1

One option is to detect the browser agent.

But you may also register listeners for touchstart/touchmove/touchend events which are triggered only on touch devices.

BTW there is a new CSS media queries in level 4.

Perhaps the most interesting for you would be the "pointer", for which the user agent is expected to return “none | coarse | fine.” According to the the spec, “typical examples of a ‘fine’ pointing system are a mouse, a track-pad or a stylus-based touch screen. Finger-based touch screens would qualify as ‘coarse.’”