Detecting touch-based browsing

I came across a situation recently where a JavaScript widget didn’t ‘work’ on the iPhone. It did technically work, but without knowing about two-fingered scrolling (and when you need to use it), it didn’t appear to work. So how do you differentiate the iPhone (and other touch based devices) from a regular browser?
Well, we all know object detection beats browser detection, but what object would you detect?

The issue in this case was with the Stylish Select jQuery pluggin. It replaces a standard drop-down with a nicer looking one. It is reasonably accessible as well, supporting keyboard use.

However, it creates a div with overflow of auto and a fixed height, which in desktop browsers creates a scroll bar. In the iPhone, it looks as though you can only select the ones that are initially visible, because there is no scroll bar.

In this case there is a nice fall-back: the select box that the JavaScript is replacing. The iPhone (and I assume other mobile browsers) show this in a system-native way.

So the question becomes how do you detect that a touch-based device is in use?

The solution came from this article on Detecting event support without browser sniffing, however, it does more than I was looking for, and wasn’t aimed at touch based detection.

I put together a little script that so far, seems to do what I’d like:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;');
   if(typeof el.ongesturestart == "function"){
      return true;
   }else {
      return false
   }
}

Currently this script gives good results for:

• IE8 / Win (no event detected)
• FF 3.6 / Win (no)
• Chrome / Win (no)
• iPhone 4.0 (yes)

I originally picked ontouchmove as a fairly advanced touch event, but Google’s Chrome started firing for that event. I’ve moved to ongesturestart which works for now, but may also be used in Chrome later.

If you have another device or browser, please try the test page and let me know the results.