Check If You Are On a Touch Enabled Device

by kirupa   |   23 September 2013

Today's world is more complicated. It is annoyingly filled with input methods that go beyond a mouse and keyboard. You have to deal with iPhones, iPads, tablets, phablets (tablones?), hybrids, and so on that revolve around touch or support touch as a primary input method. There will be times when you need to know in your HTML document whether you are on a device that is touch friendly. In this short article, you will learn how to add a few lines of JavaScript to easily handle such times.

Take a look at the following example:

If you are viewing this page on a device that supports touch, you will see a "Touch is supported!" message. If you are on a device that doesn't support touch, you will see a message that says "No touching!" (Obligatory clip from Arrested Development here.)

In the following sections, you'll learn how to perform this check and how it all works the way it does.

Onwards!

Checking for Touch

First, let's just look at the code you need to check if you are on touch enabled device. The code looks as follows:

function isTouchSupported() {
	var msTouchEnabled = window.navigator.msMaxTouchPoints;
	var generalTouchEnabled = "ontouchstart" in document.createElement("div");

	if (msTouchEnabled || generalTouchEnabled) {
		return true;
	}
	return false;
}

To use the isTouchSupported function, simply call it:

isTouchSupported()

This function returns a true if you are on a device that supports touch. This function returns a false if you are a on a device that doesn't support touch. Pretty straightforward!

The Code Explained

In the previous section, you saw the code and how to use it. In this section, let's quickly look at how the code works. There are two things that are at play here. Thing number one is how to detect whether you are on a touch device on Microsoft's Internet Explorer 10. Thing number two is how to detect whether you are on a touch device on Chrome/Safari, Firefox, Opera, and newer versions of Internet Explorer.

These two things are handled by the following highlighted lines:

function isTouchSupported() {
	var msTouchEnabled = window.navigator.msMaxTouchPoints;
	var generalTouchEnabled = "ontouchstart" in document.createElement("div");

	if (msTouchEnabled || generalTouchEnabled) {
		return true;
	}
	return false;
}

For Internet Explorer, the msTouchEnabled variable stores the value returned window.navigator.msMaxTouchPoints property. If you are on a touch enabled device, this property returns a value of at least a 1. For the other browsers, you have the generalTouchEnabled variable:

var generalTouchEnabled = "ontouchstart" in document.createElement("div");

This variable's value is either a true or false. The way I determine that is by creating a div element on the fly and seeing whether the ontouchstart event exists on that element.

Now, if you are on a touch enabled device and running on a reasonably new browser, the msTouchEnabled or generalTouchEnabled properties will return a true. With that knowledge, you can see how the following if statement will return a true for a touch enabled device and a false if you are on a non-touch enabled device:

if (msTouchEnabled || generalTouchEnabled) {
	return true;
}
return false;

And with that, you have learned not only how to check for a touch enabled device but also how that check actually works.

Conclusion

Just because you can check if you are on a touch enabled device and do something different doesn't mean you always should. In general, you want to ensure your content works well on both touch as well as non-touch devices. With the prevalence of hybrid devices that support both touch as well as the mouse, it is hard to guess which input method your users will want to use. Given that uncertainty, you should use this check to enhance the default mouse focused experience as opposed to detracting from it or doing something optimized for touch.

Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Creating high-quality content is a team effort that takes a boatload of time. If you found what you see here helpful, please consider sending a small tip:

While tipping is entirely optional, we'll be your bestest friend forever if you do.

More Details & Options