Change hover settings for different mobile browsers?

Question

I've got a website that utilizes :hover effects in the navbar & body.

Using the mobile version of Safari on i-devices, hover events become "double-tap" events: one tap to display what would normally appear when 'hovering', and a second tap to 'click' the link. This feature is useful for certain things... displaying a text dropdown on a thumbnail image, for instance, but annoying when selecting a navbar link.

On my android device using Chrome, the opposite occurs by default: Hover effects are simply ignored, no double click, nadda.

How might I modify the default ":hover becomes 'double-click' " behavior for specific objects on mobile versions of safari, while "adding" that functionality for android users?

Answer 1

I don't know the exact setup of your coding, but there are several options you have.

First of all instead of browser or OS detection it is better to use feature detection (if possible), because feature detection will work for every setup instead for specific browsers or OS'. There are some frameworks out there you can use like modernizr.

Another way to deal with things like this is to use CSS Hacks that only apply if it's the specific device/browser/OS. You will find hundreds of CSS Hacks in the net.

There are other ways to detect the browser/OS like the user agent string, for solutions going in this direction I can recommend this question How to detect Safari, Chrome, IE, Firefox and Opera browser? and Detecting iOS / Android Operating system.

What really fits your use case best, you have to decide yourself, but this are the options I suggest.