32

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.

0

6 Answers 6

27

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:

There may be detection in jquery for mobile and jtouch

5
  • 1
    Works for iPhone, but what about Androids, BlackBerries, Symbians, WebOS...?
    – Esko
    Jun 7, 2011 at 8:45
  • 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
    – mplungjan
    Nov 15, 2013 at 15:34
  • Returns false on iPhone with iOS 7.0.6 using Safari.
    – Niclas
    Feb 26, 2014 at 1:57
  • Do any of these work? stackoverflow.com/questions/4817029/…
    – mplungjan
    Feb 26, 2014 at 5:38
  • Or this hacks.mozilla.org/2013/04/…
    – mplungjan
    Feb 26, 2014 at 5:38
14

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
}
1
  • 2
    Feature detection > UA Checking. Jan 15, 2013 at 15:34
14
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

1
  • 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 Sep 6, 2016 at 15:08
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.

2

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();
}
1

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

2
  • 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. Jul 1, 2013 at 12:00
  • what about touch screens or desktops, this does not detect that.
    – MGot90
    Nov 2, 2016 at 15:05

Not the answer you're looking for? Browse other questions tagged or ask your own question.