Detecting touch device with javascript

I’ve used Modernizr to detect browser features. It’s easy and awesome. Now I’ve been developing a site and testing it with Windows Phone 8 with Internet Explorer 10. The new IE does not support touch events, it supports pointer events. That’s why IE10 has ”no-touch” class in the HTML element.

To detect touch capability with IE10 support, use:

function isTouchDevice (){
//for wp8+ie10
if(navigator.msMaxTouchPoints) return true;
return $(”html”).hasClass(”touch”);
}

Very handy HTML5 & CSS3 checker: Modernizr.js

Modernizr detects which HTML5 and CSS3 features user’s browser supports and reports them in a very convenient way: it adds classes to the body tag. The supported features can be checked with javascript, but reporting features with CSS classes is ingenious! Developer don’t have to write if…else -conditions all over javascript because validation can be done in the stylesheet.
Jatka lukemista ”Very handy HTML5 & CSS3 checker: Modernizr.js”