How to determine if the client is a touch device [duplicate]

Question

is there any nice and clean method or trick to find out if the user is on a touch-device or not?

I know there is stuff like var isiPad = navigator.userAgent.match(/iPad/i) != null;

but I simply wonder if there is a trick to generally determine if the user is on Touch device? Because there are a lot more touch devices and tablets out there then just iPads.

thank you.

Answer 1

You can use the following JS function:

function isTouchDevice() {    var el = document.createElement('div');    el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"    return typeof el.ongesturestart === "function"; } 

Source: Detecting touch-based browsing.

Please note the above code only tests if the browser has support for touch, not the device.

Related links:

• Optimize website for touch devices
• What is the best way to detect a mobile device in jQuery?
• What's the best way to detect a 'touch screen' device using JavaScript?
• Mozilla.org Detecting touch: it’s the ‘why’, not the ‘how’

There may be detection in jquery for mobile and jtouch

Answer 2

Include modernizer, which is a tiny feature detection library. Then you can use something like below.

if (Modernizr.touch){    // bind to touchstart, touchmove, etc and watch `event.streamId` } else {    // bind to normal click, mousemove, etc }