Javascript – Detection of Touch Enabled Devices

I needed to determine if a device is touch enabled or not to modify the user experience based on that.  I know that Modernizer is the standard for this sort of thing, and I’ve used it in the past and it does work nicely.  However I didn’t want to go that route for two reasons:

  1. In designing a mobile friendly, fast loading site, I didn’t want to add another library for my users to download when I only needed one feature (that turned out to be one short line of code)
  2. In my research, Modernizer has limitations with IE10.  Now in fairness, the posts I was reading were about two years old and I’m guessing Modernizer has corrected that issue, but given my first point here I didn’t want to go that route anyway.

The Solution

So my solution was this, found via the reference linked below.

The variable isTouch will return true if you are on a touch screen.  The

portion covers most all browsers, where as

is specifically looking for IE devices, I believe it’s IE10 and above with the new Windows mobile push that this came about.  So this should cover all browsers and devices.

In Use

With that one line of device feature detection in place, I simply add something like this and we are all set to go.

Browsers Tested

  • Firefox 29.0.1 (Windows 8.1)
  • Chrome 34.0.1847.137 m (Windows 8.1)
  • IE 11.0.9600.17107  (Windows 8.1)
  • IE 10.0.9200.16721  (Windows 7)
  • Safari (iPhone 4s iOS 7.1.1)
  • Chrome (iPhone 4s iOS 7.1.1)