Detect "touch" Devices (Not "mobile")


I really do not have any temptation to own a tablet or any other "touch device". I am a happy ultrabook user so I was surprised my customer complained:

  • Hi Ziggi, the site you’ve developed is good but we can’t use mouse rollover on iPads!

It was not nice, indeed >:(

Well, stupid iPad does not make any use of “double-tap” and simply ignore all my carefully build rollover effects (wasn’t Steve Jobs just a conceited a…hole?).

Because all the other stuff is showing fine on modern mobile devices, the question is - how to tell a device is a "touch" device with no mouse rollovers implementation???

Specifically I need to show some completely different menu system on such devices.

Please advice!

Hi Ziggi,

This is tricky because it is all about what the browser will tell us, Modernizr is a Javascript library that is able to detect touch suport (apparently not perfectly). It has both Javascript and CSS query support so you might try it out, I’m not aware of any way to do it on the server side - you could maintain a list of devices and check against them but this is a lot of curation.

Good luck.

Nasty thing - isn’t it?