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 capa

Answer 1

I also struggled a lot with different options on how to detect in Javascript whether the page is displayed on a touch screen device or not. IMO, as of now, no real option exists to detect the option properly. Browsers either report touch events on desktop machines (because the OS maybe touch-ready), or some solutions don't work on all mobile devices.

In the end, I realized that I was following the wrong approach from the start: If my page was to look similar on touch and non-touch devices, I maybe shouldn't have to worry about detecting the property at all: My scenario was to deactivate tooltips over buttons on touch devices as they lead to double-taps where I wanted a single tap to activate the button.

My solution was to refactor the view so that no tooltip was needed over a button, and in the end I didn't need to detect the touch device from Javascript with methods that all have their drawbacks.

Answer 2

You can install modernizer and use a simple touch event. This is very effective and works on every device I have tested it on including windows surface!

I've created a jsFiddle

function isTouchDevice(){
    if(Modernizr.hasEvent('touchstart') || navigator.userAgent.search(/Touch/i) != -1){
         alert("is touch");
            return true;
         }else{
            alert("is not touch");
            return false;
    }
}

Answer 3

Extent jQuery support object:

jQuery.support.touch = 'ontouchend' in document;

And now you can check it anywhere, like this:

if( jQuery.support.touch )
   // do touch stuff

Answer 4

All browser supported except Firefox for desktop always TRUE because of Firefox for desktop support responsive design for developer even you click Touch-Button or not!

I hope Mozilla will fix this in next version.

I'm using Firefox 28 desktop.

function isTouch()
{
    return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}

Answer 5

The problem

Due to hybrid devices which use a combination of touch and mouse input, you need to be able dynamically change the state / variable which controls whether a piece of code should run if the user is a touch user or not.

Touch devices also fire mousemove on tap.

Solution

1. Assume touch is false on load.
2. Wait until a touchstart event is fired, then set it to true.
3. If touchstart was fired, add a mousemove handler.
4. If the time between two mousemove events firing was less than 20ms, assume they are using a mouse as input. Remove the event as it's no longer needed and mousemove is an expensive event for mouse devices.
5. As soon as touchstart is fired again (user went back to using touch), the variable is set back to true. And repeat the process so it's determined in a dynamic fashion. If by some miracle mousemove gets fired twice on touch absurdly quickly (in my testing it's virtually impossible to do it within 20ms), the next touchstart will set it back to true.

Tested on Safari iOS and Chrome for Android.

Note: not 100% sure on the pointer-events for MS Surface, etc.

Codepen demo

---

const supportsTouch = 'ontouchstart' in window;
let isUsingTouch = false;

// `touchstart`, `pointerdown`
const touchHandler = () => {
  isUsingTouch = true;
  document.addEventListener('mousemove', mousemoveHandler);
};

// use a simple closure to store previous time as internal state
const mousemoveHandler = (() => {
  let time;
  
  return () => {
    const now = performance.now();

    if (now - time < 20) {
      isUsingTouch = false;
      document.removeEventListener('mousemove', mousemoveHandler);
    }

    time = now;
  }
})();

// add listeners
if (supportsTouch) {
  document.addEventListener('touchstart', touchHandler);
} else if (navigator.maxTouchPoints || navigator.msMaxTouchPoints) {
  document.addEventListener('pointerdown', touchHandler);
}

Answer 6

As Modernizr doesn't detect IE10 on Windows Phone 8/WinRT, a simple, cross-browser solution is:

var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;

You only ever need to check once as the device won't suddenly support or not support touch, so just store it in a variable so you can use it multiple times more efficiently.