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.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!