Detect Touch Capability Javascript

[jscheuer1]

I've looked about the web, and except perhaps for one or more old versions of Chrome which might give a false positive on it I see that this is probably a quick and easy way to detect a touch device:

var touchcabable = 'ontouchstart' in document.documentElement;

I'm not worried about old versions of Chrome as they update their browser mostly automatically without user intervention, anyone stuck with an older version has likely done so intentionally. And the consequences of a false positive are minimal in my planned usage of it anyway, as long as it works in the vast majority of cases. I get no false positive in my current version of Chrome.

Here's the test page, I'm particularly interested in touch capable browsers of all kinds as I have none to test on, but any feedback as to the accuracy or lack thereof of the two report lines on this page is welcome:

http://home.comcast.net/~jscheuer1/s...line/touch.htm

There are just two lines:

1.) On the first parse of the head this device/browser is not touch enabled
2.) On document ready this device/browser is not touch enabled

They of course both say is not for me, as I'm on an ordinary laptop running Win 7. If you have a touch device they should be:

1.) On the first parse of the head this device/browser is touch enabled
2.) On document ready this device/browser is touch enabled

I used two statements just in case some devices couldn't report correctly until after the full page was parsed (#2).

Like I said, please let me know what happens, and please include browser, device, OS, including version numbers for each of those.

[Beverleyh]

Oooh, that looks like an exciting script

Ok - I'm on iPhone 4S running iOS 6.0.1

Mercury Browser v7.2 : 1 = is, 2 = is
Chrome 23.0.1271.100 : 1 = is, 2 = is
Safari (default installation) : 1 = is, 2 = is

[Nile]

HTC Rezound running Android 4.0.3

Internet (default installation) - both enabled as expected
Chrome 18.0.1025469 (latest) - both enabled as expected
Firefox Aurora 19.0a2 (latest) - both enabled as expected

[traq]

Acer A100 (Android 4.0.3 / Browser (default))

looks fine. Great snippet.

[bernie1227]

It functions as expected on ye olde iPad 2, both say is (on any of my increasingly large number of browsers. (I don't even know why I test the other browsers, seeing how any browser on IOS has to use apple's mobile safari))
Excellent snippet by the way, I'll have to use it in the future!

[clueful]

I've looked about the web, and except perhaps for one or more old versions of Chrome which might give a false positive on it I see that this is probably a quick and easy way to detect a touch device:

var touchcabable = 'ontouchstart' in document.documentElement;

I read on a thread somewhere that on a particular ms platform you need to test for 'onmsgesturechange' instead.
I can't verify that, but to be on the safe side I would use:

var isTouchDevice = ( 'ontouchmove' in document.documentElement || 'onmsgesturechange' in document.documentElement )

[jscheuer1]

You're probably right, and then some. I found this after Googling 'onmsgesturechange':

https://gist.github.com/4199058

If you look at the change log you will see that they started out with the snippet I'd found and your suggested addition. And progressed to that:

var touch = !!window.Touch || !!window.onmsgesturechange || (window.DocumentTouch && window.document instanceof window.DocumentTouch);

Anyways, here's a test page using the above logic:

http://home.comcast.net/~jscheuer1/s...ine/touch2.htm

Please test it to see if it works as well.

BTW - None of the devices/browsers reported above would need this, but some others would. But I'm still curious to see if this new test page works even in the browsers already tested.

[clueful]

I read on a thread somewhere that on a particular ms platform you need to test for 'onmsgesturechange' instead.
I can't verify that, but to be on the safe side I would use:

var isTouchDevice = ( 'ontouchmove' in document.documentElement || 'onmsgesturechange' in document.documentElement )

I need to reprise this subject following a report that when testing one of my scripts under Chrome, the above test gave a false positive. I couldn't investigate the cause, but have since concluded that unless this information is needed at build time, the best way to detect a touchscreen must be simply to set a flag in a touchstart handler that acts on the whole document. In practice this should make the data available in time for use by combined event handlers that need it for branching.

[jscheuer1]

Both of those are false here in my Chrome. I had seen something about that (false positives in Chrome), as I looked around the web at what people were writing about detecting touch. I got the impression though that it was a bug in Chrome that has since been fixed.

For most purposes, as it turns out, my first post in this thread is sufficient.