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.

Alluvium

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:

• How to detect a mobile device using jQuery
• How to optimize website for touch devices
• How to detect a mobile device using 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

Borzoi

Works for iPhone, but what about Androids, BlackBerries, Symbians, WebOS...? – Zipah

Not a useful comment. Does not work how? Did you alert(typeof el.ongesturestart) or what did you try? What device? What OS? Downvoting without a constructive message is not helping anyone. Also this is a 2 year old post. The world has moved since – Borzoi

Returns false on iPhone with iOS 7.0.6 using Safari. – Hovel

Do any of these work? #4817529 – Borzoi

Or this hacks.mozilla.org/2013/04/… – Borzoi

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
}

Heydon

Feature detection > UA Checking. – Christogram

Answer 3

if ("ontouchstart" in document.documentElement)
{
  alert("It's a touch screen device.");
}
else
{
 alert("Others devices");
}

most simple code i found after browsing a lot here and there

Stevenstevena

I wouldn't trust this as it shows true on my mac which is not a touch device. This simply asks if the browser supports it .. i think – Majka

Answer 4

Using document.createEvent("TouchEvent") will not work on desktop-devices. So you can use it inside an if statement.

Note that this method could produce errors on non-touch devices. I would prefer checking for ontouchstart in document.documentElement.

Verne

Answer 5

Check out this post, it gives a really nice code snippet for what to do when touch devices are detected or what to do if touchstart event is called:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

Fagin

Answer 6

If you use Modernizr, it is very easy to use Modernizr.touch as mentioned earlier.

However, I prefer using a combination of Modernizr.touch and user agent testing, just to be safe.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

If you don't use Modernizr, you can simply replace the Modernizr.touch function above with ('ontouchstart' in document.documentElement)

Also note that testing the user agent iemobile will give you broader range of detected Microsoft mobile devices than Windows Phone.

Also see this SO question

Merryman

Your user agent detection logic is broken: you are assuming every mobile device has a touchscreen. Some Blackberry models (OS <= 7) for instance don't have one. Even in iPhone someone might create an eye-movement controlled browser that does not feature touch events. and finally you could have used the /Mobile/i regex instead of that long OR. – Beriberi

what about touch screens or desktops, this does not detect that. – Glyceric