I'm building a simple html menu with unordered lists and I'm trying to prevent google chrome browser to display its magnifier every time I click a link.
The browser considers the li's to be too close from each other for the user to click it accurately. But I disagree!
How could I disable/cancel/prevent this behavior, other than setting a bigger padding on the li elements please? Is there even a way?
I think I found a way and it's so stupid I don't know how I didn't think of it sooner...
Just change the viewport meta tag to disable zooming on the page and the magnifier feature won't bother you anymore.
i.e.
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />
I tested this on Galaxy Nexus and Galaxy Note with success. Any other input and feedback is welcome!
[EDIT]
After experimenting a lot with mobile UX I'd advise to... DESIGN BIGGER BUTTONS!
I don't think there is a way to disable this as it is a feature of the Android Chrome browser.
Unfortunately, the source code for Android Chrome browser isn't open source (yet) so I can't take a look.
You may find it useful to report a bug here: new.mcrbug.com
It seems to work with this CSS declaration:
-webkit-touch-callout:none;