Call
608.845.2900
Visit
330 Locust Dr.
Verona, WI 53593
Message
info@powderkegwebdesign.com
NEED SOME GUIDANCE ON PLANNING A NEW WEBSITE?
Download our free guide!
Powderkeg Web Design
Menu
Message Us
Nick
Nick

Ever wonder why some links on mobile browsers require you to click them twice?

January 23, 2015

If you have ever developed a responsive website, you have probably run in to an issue where you have to click a link twice to actually go to next page. Usually the first click will trigger the “hover” effects that you would typically see when you mouse over the link on a desktop browser, and the second click will then send you on your way.

It’s not all browsers that do this. Most Android browsers (such as chrome) go to the link on the first click. iOS browsers, on the other hand. love to show off the hover effects regardless of what device you are on.

Sometimes having to click twice may be a desired effect. Perhaps you have a large menu with a submenu that normally appears on a mouse click. You would want the first click to open that sub menu in order to access the child links. While you would technically want the double click functionality, the reality is that you should be employing mobile specific menus via media queries or some other detection mechanism.

Let’s dive in to a basic case study:

If I have a link that, when hovered over, will unhide another element inside the link:

 

Your less styles:

 

This will effectively create a link that scares you when you hover over it. Now if you were to fire up safari on a mobile device and click it, it should also scare you instead of taking you to the link destination.

The Solution

The easiest workaround for this without getting in to third party javascript libraries is to essentially unset the hover effect using a media query for a certain width. If there is no “hover” effect then there won’t be a double click involved to follow a link.

 

Now you are back to having cross browser, mobile friendly links that give you the expected desktop and mobile experience!

Nick
Nick
Senior Developer

Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.