Detecting touch-based browsing

Please note, the method I outlined used ontouchmove, which was also picked up by Google Chrome 6. I changed it to use ongesturestart, which excluded Chrome 6. Now Chrome 7 (windows) does not pick up ontouchmove or ongesturestart.

A finger pointing down towards you, blurry figure and trees in the background.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.


5 Contributions to “Detecting touch-based browsing”

  1. Gregers Rygg wrote:

    I’ve used a similar object detection test for touch events. You should be aware that it only tests if the browser has support for touch, not the device. There are laptops with touch-screen out in the wild, and Chrome have already started implementing touch support. The latest version of Chrome in the dev channel exposes touch events even though I have a computer without touch. So it might be a good idea to watch this issue: http://code.google.com/p/chromium/issues/detail?id=36415

  2. Gregers Rygg wrote:

    If anyone knows a better solution. Please answer my question on StackOverflow:
    http://stackoverflow.com/questions/2607248/optimize-website-for-touch-devices

  3. Isaac Goldberg wrote:

    Gregers is correct — the newest version of Chrome now “supports” touch events, and so this script returns that touch is supported on my computer in Chrome, even though there is in indeed no touch support.

  4. Paul wrote:

    won’t
    if(document.documentElement.ontouchmove){

    }

    do the trick?

  5. AlastairC wrote:

    Hi Paul,

    That doesn’t seem to fire for my iPhone.

    The main problem at the moment is that Google Chrome does fire for that event, although moving to ongesturestart has helped for now.