How do I tell whether a browser is on a touchscreen device with JavaScript?

Question

I know this is a bit of perennial question, but here goes: I want to know whether the device my site is being accessed with is a touchscreen. That means phones and iPads, of course, which are individually detectable, but also other touchscreens that may well be running flavors of Windows. Any chance of determining the presence or absence of a mouse on those?

Let's say I'm willing to use a large JavaScript library like Modernizr. Will that help any?

Answer 1

You might want to look into MobileESP. Not touchscreens only, but it at least gives you some detection capabilities. From their page:

The MobileESP project seeks to provide web site developers an easy-to-use and lightweight API for detecting whether visitors are using a mobile device, and if so, what kind. The APIs provide simple boolean results for popular individual device OS categories (such as iPhone, BlackBerry, Symbian S60, and Windows Mobile), device capabilities (e.g., J2ME), and broad classes of devices, such as "iPhone Tier" (iPhone/Android/WebOS) and smartphones.

Answer 2

See http://stackoverflow.com/questions/2607248/optimize-website-for-touch-devices

Answer 3

Try http://wurfl.sourceforge.net/ for device capabilities.

Answer 4

Try http://51degrees.codeplex.com. It is an ASP.NET open source module which detects mobile devices and provides auto redirection to mobile optimized pages when request is coming from mobile device. It makes use of WURFL mobile device database. For redirection there is no need to modify existing ASP.NET web application pages.

Apart from this it also gives upto-date mobile capability information like manufacturer, model, screen height & width, image formats supported and MANY MORE...... which helps to customize pages for best mobile output.