Wednesday, September 28, 2016

Prevent hover on touch screen devices

There are 2 simple ways to check for touch support with JavaScript:
  1. You can use Modernizr.js library. Latest versions of Modernizr (2.6.2 for sure) automatically checks for touch support and attaches a .no-touch class to HTML tag, if device doesn’t support touch.
  2. If you do not want to use Modernizr, you can add small piece of JavaScript below, which will do exactly the same thing.

//touch events support and if not supported, attach .no-touch class to the HTML tag.

if (!("ontouchstart" in document.documentElement)) {
   document.documentElement.className += " no-touch";
}