Can JavaScript - or any other language - detect touchscreens?

[Frank S]

Hi,

We have to consider that the use of touchscreens is on the rise and that we may have to adapt our code to that. For example, menu items and other links will have to have a great enough touch margin. But that can have unwanted aesthetic effects. Is there a way to detect that a visitor uses a touchscreen, so that we can cater to that only when needed?

[Pullo]

Sure, use modenizr.

Include this on your page, then you can do:

if (!Modernizr.touch){
  ...
}

See also: http://stackoverflow.com/questions/3...ith-javascript

[Frank S]

Thanks, Pullo. I thought chances were so slim that I didn't bother searching the net, but went straight to the specialists here with that question. But it is quite possible. I only hope that it is cross-browser, and then I mean the rather unreliable proprietary browsers that many touch devices have.

But still, thanks.

[Pullo]

No problem
I was also pleasantly surprised to find out how easy it is.
(Although be aware, Modenizr is sometimes prone to false positives)

[ralph.m]

I'm not sure of the exact correspondence of touch screens to @media query recognition, but you can target more advanced smart phones with CSS @media rules, so that might be the answer to your need here.

On the horizon, we will soon be able to detect all sorts of things, like how much bandwidth the device is currently supporting and how much charge its battery has. So presumably there will be ways of detecting if there is touch functionality, too (if not already). It just may not be necessary for what you want to do here. CSS3 is the easy way.

Edit:

Had this post open for longer than I realized. Lots of answers posted in the mean time, so this may not be relevant.