Touch Screen Detection

Since touchscreens don’t have a “hover” state, Apple has made it so on iOS devices (iPads and iPhones) if an HTML element has :hover styling in the CSS, the first click on that item will produce the :hover state, and the second click will be an actual click. This can cause problems in certain instances.

A way around it is to add a “no-touch” class to <body>, then using Javascript detect if this is a touchscreen, and if it is then remove this class. Example:

<?php
/**
* Body Classes
*
*/
function be_body_classes( $classes ) {
$classes[] = 'no-touch';
return $classes;
}
add_filter( 'body_class', 'be_body_classes' );
view raw functions.php hosted with ❤ by GitHub
jQuery(function($){
// Touch Device Detection
var isTouchDevice = 'ontouchstart' in document.documentElement;
if( isTouchDevice ) {
$('body').removeClass('no-touch');
}
});
view raw global.js hosted with ❤ by GitHub

javascript mobile touchscreen

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk