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();
}