How can I check for real touch support on a browser

javascript jquery ios events touch

21,971

Solution 1

Try:

'ontouchstart' in document.documentElement

Solution 2

Not that you probably don't want to change behavior just because a browser 'supports touch'. Eg. Chrome on Windows now supports touch all the time, even though there won't necessarily be a touch screen attached. Even if there is a touch screen attached, the user doesn't necessarily use it, so you need to be careful with what you change.

So this really comes down to why you want to know:

You want to know whether you're going to get touchstart/touchmove/touchend events: There's really no way to know this in advance for sure. Eg. the user could plug in a touch screen after your page has loaded. If you might be interested in these events, you should just listen for them.
You want to know if you should display a 'mobile' version of your site Whether or not the user has touch support is not the right signal for this - eg. a Windows user with a touch screen probably does NOT want your mobile site. You can use UserAgent heurstics, but please give the user a sticky way to switch versions of your site.
You want to know if you should tweak your UI to be more friendly for touch input Eg., maybe some buttons should be larger if the user is likely to use touch. In general it may be best to always design for multiple pointer types - after all you have no way to know the user's pointer preference when they have both touch and mouse. But if you really want to use knowledge of the pointer hardware available as a hint to making the best UI tradeoff, then there are new CSS media queries you can use:
- http://dev.w3.org/csswg/mediaqueries4/#pointer
- http://dev.w3.org/csswg/mediaqueries4/#hover

I added partial support to Chrome for these in Chrome 21 (crbug.com/123062). As far as I know, no other browser supports them yet.

Solution 3

('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch

21,971

Author by

Oscar Godson

Fork me on Github: http://github.com/oscargodson Read my stuff: http://oscargodson.com

Updated on May 24, 2020

Comments

Oscar Godson almost 4 years
Today (or very recently) Chrome Beta updated to 17 for me and with it i noticed some funkiness in my web app. I noticed it was because a class was being added to the body element that normally only gets put there if there is touch event support which I check like this:
```
  try {  
    document.createEvent("TouchEvent");
    _device.touch = true;
  } catch (e) {
    _device.touch = false;
  }
```
And sure enough, i can create and trigger touch events on Chrome 17. First idea i had was, oh, i can check for touch, and see if a mouse click fails, therefore, there's a mouse, but MouseEvents trigger too.

How else can I check, without user agent sniffing, that it's an actual, touchable, device, and not just a browser that supports touch events.
Oscar Godson over 12 years

Works great :) checked on Chrome 17, FF9, Safari 5, IE7-9
Ry- almost 12 years

@MarcelJackwerth: Let me check that when I get back to Windows, but on Chrome 19 it seems to work fine at least...
dragon almost 12 years

failed on Android (gingerbread) - this apparently continues returning false on a touch screen phone.
Ry- almost 12 years

@dragon: Try one of these tests, then: modernizr.github.com/Modernizr/touch.html
Otto over 11 years

Even this is flaky though. Chrome 25 is reporting that I have pointer:course and hover:0 on a Dell 17 inch laptop. Yes, the laptop has touchscreen support, but it's turned off and I'm using a mouse. That's kind of a problem. (Note that this is starting to impact me with real web apps: core.trac.wordpress.org/ticket/20614#comment:34 )
Ry- over 11 years

@user983693: On which browser? Does the ontouchstart event actually work?
Maarten over 11 years

@minitech: IE10. But I admit that I should really do a more thorough test though... From what I can recall I ended up using MSPointerDown for the ontouchstart event instead
Dave about 11 years

Much agreed, it's good to distinguish between Mobile and Touch. Touch screen on Windows and 10" tablets won't want a touch screen site. However, a lot of developers optimize for touch by replacing onclick events with ontouchstart,etc. to avoid waiting for the double-tap. In this case, pointer detection would be more effective since this encumbers devices with touch AND pointers.
Dave about 11 years

IE 9.0.8 doesn't fully support touch events. Good piece here: Everything there is supported by Gecko, WebKit, V8.
Blazemonger over 10 years

@minitech current Git page: github.com/Modernizr/Modernizr/blob/master/feature-detects/…
Rick Byers almost 10 years

Otto: that's how the media queries used to be defined (in terms of the "least capable" of all pointing devices). Based on feedback we've updated the media queries spec and will now be returning pointer: fine, hover: 1 in touchscreen laptop cases (but pointer-any: coarse will return true). See dev.w3.org/csswg/mediaqueries4/#mf-interaction. We're hoping to land this in Chrome 38: crbug.com/136119.
Matt Jensen over 7 years

Source: github.com/Modernizr/Modernizr/blob/master/feature-detects/…
Brian Cannard about 7 years

('ontouchstart' in window) || window.DocumentTouch && window.document instanceof DocumentTouch || window.navigator.maxTouchPoints || window.navigator.msMaxTouchPoints ? true : false
Brian Cannard about 7 years

Note that FF team was enabling and disabling touch support many times, and lastly decided to enable it forever in the upcoming 52 release.