Question

How can I detect whether a browser has tap highlighting? I could just scan the user agent string for “iphone”, “ipad”, and “android” and hope to cover most touch screen devices, but that seems rather crude. Do you know of a way to tell reliably? Or any other ideas?

I want to disable my CSS :hover effects if the browser has tap highlighting (having both at the same time is quite disconcerting). In my case that’s much preferable to disabling the tap highlighting.

Thanks for your time and I’d appreciate any ideas you might have!

Answer 1

You can use the following code snippet to detect touch screen devices:

function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}