Mar 31, 2016

Use Modernizr.mq to detect touch devices

For detecting touch operated devices use Modernizr.mq instead of Modernizr.touchevents, at least when it comes to non-essential progressive enhancements. Why? It’s safe to assume users with browser viewport widths lower than 1025px (for example) are either using touch screens or have greater concerns than fancy effects, like getting a website that’s at least usable (imagine IE8 on WinXP with a 1024x768 resolution.)

The Technicals

According to this page on modernizr.com:

Older touchscreen devices only emulate mouse events Modern IE touch devices implement the Pointer Events API instead: use Modernizr.pointerevents to detect support for that Some browsers & OS setups may enable touch APIs when no touchscreen is connected Future browsers may implement other event models for touch interactions

Usage Example

// Mobile first
if (Modernizr.mq('(min-width: 1025px)')) {
    // Initialize enhancements
    const s = skrollr.init();
}

Official docs on Modernizr.mq

Filed under code, modernizr, snippets
download2