How to detect touch on a devise through Javascript across Android and iOS?

1
votes

I've certain functionality on a web page that I'd like to render only if the browser doesn't support touch. After a lot of googling, I've found out the following code, and it works, but it just works on Android, and doesn't work on iOS devices:

function supportsTouch() {
    return ('onstarttouch' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
}

I've also tried Modernizr, and written the following script to detect the touch capability on a device:

function supportsTouch() {
  if (Modernizr.touchevents) {
    return true;
  }
}

But it works on neither OS. I know that it's not possible to actually detect that either a devise responds to physical touch or not according to this, but is there any hack that could possibly tell me about touch capability of a devise on both platforms: iOS and Android?

Note: I'd not go with the option of media queries, because that would contaminate my web application as anyone can change the width of a browser on a desktop machine.

1
javascripttouchmodernizr

1 Answers

3
votes

After a lot of struggle, I finally managed to get a few lines of code that detect touch for Android as well as iOS devices, and here is the final function:

function supportsTouch() {
    return ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0) || (typeof el.ongesturestart == "function")
}