Detecting Touch Screen Capability with Modernizr

I’m fascinated by the evolution of mobile phones over the years. Today, not only are mobile phones equipped with touch screens, but they also offer desktop-like browsing experiences and host a variety of useful applications to boost productivity. When designing responsive websites targeted at mobile users, we sometimes need to implement specific enhancements to leverage their multi-touch features.

However, we must first determine if a device supports touch interactions, which can be easily accomplished using Modernizr.

Using Modernizr for Touch Feature Detection

Visit the Modernizr download page and make sure to select the Touch Event option.

Next, incorporate the Modernizr.touch code into your script to check if the device supports touch interaction. Here’s a straightforward example:

if (Modernizr.touch) { 
    alert('Touch Screen');
} else { 
    alert('No Touch Screen');
}

This simple JavaScript snippet will trigger a popup message indicating whether a touch screen is supported or not.

Additionally, you can use the Modernizr.load method to conditionally load the touchSwipe, a jQuery plugin for touch gestures. Here’s how to set it up:

Modernizr.load({
    test: Modernizr.touch,
    yep : 'touchSwipe.js',
});

This code checks for touch capability. If the device supports touch, indicated by yep, it will automatically load the touchSwipe.js script.

Embracing Touchscreen Features in Web Design

With the increasing prevalence of touchscreen devices, making your website touch-friendly can enhance user experience and engagement. Detecting touch capabilities is an essential first step towards tailoring your site for these interactions and making a positive impression on visitors.

Note: This post was first published on the Oct 8, 2013.