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 capability. I’m using jquery-mobile.js to detect the touch screen events and it works on iOS, Android etc., but I’d also like to write conditional statements based on whether the user’s device has a touch screen.

Is that possible?

Answer 1

Update: Please read blmstr’s answer below before pulling a whole feature detection library into your project. Detecting actual touch support is more complex, and Modernizr only covers a basic use case.

Modernizr is a great, lightweight way to do all kinds of feature detection on any site.

It simply adds classes to the html element for each feature.

You can then target those features easily in CSS and JS. For example:

html.touch div {
    width: 480px;
}

html.no-touch div {
    width: auto;
}

And Javascript (jQuery example):

$('html.touch #popup').hide();