jquery - What's the best way to detect a 'touch screen' device using JavaScript?

Question

I've written a jQuery plug-in that's for use on both desktop and mobile devices. I wondered if there is a way with JavaScript to detect if the device has touch screen capability. I'm using jquery-mobile.js to detect the touch screen events and it works on iOS, Android etc., but I'd also like to write conditional statements based on whether the user's device has a touch screen.

Is that possible?

Answer 1

UPDATE 2021

To see the old answers: check the history. I decided to start on a clean slate as it was getting out of hands when keeping the history in the post.

My original answer said that it could be a good idea to use the same function as Modernizr was using, but that is not valid anymore as they removed the "touchevents" tests on this PR: https://github.com/Modernizr/Modernizr/pull/2432 due to it being a confusing subject.

With that said this should be a fairly ok way of detecting if the browser has "touch capabilities":

function isTouchDevice() {
  return (('ontouchstart' in window) ||
     (navigator.maxTouchPoints > 0) ||
     (navigator.msMaxTouchPoints > 0));
}

But for more advanced use cases far more smarter persons than me have written about this subject, I would recommend reading those articles:

• Stu Cox: You Can't Detect a Touchscreen
• Detecting touch: it's the 'why', not the 'how'
• Getting touchy presentation by Patrick H. Lauke