12

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?

Armel Larcier
  • 15,747
  • 7
  • 68
  • 89

3 Answers3

14

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!

Armel Larcier
  • 15,747
  • 7
  • 68
  • 89
  • Thanks @Armel, Helped me alot. How did you get that? – Ata Iravani May 14 '13 at 08:13
  • 2
    Is it possible to do it without the 'user-scalable=no'. I **want** users to be able to zoom. However I do **not want** the zoom overlay to popup on button clicks? Thanks – rottitime Jun 18 '14 at 11:42
  • 1
    Not that I know of. I'd have edited my answer ;-) Make bigger buttons! – Armel Larcier Jun 18 '14 at 14:14
  • Armel, you have made my day! – walv Aug 08 '14 at 11:02
  • 2
    however this breaks the layout when page is autorotated, so I have left only and it works ok for me. – walv Aug 08 '14 at 11:21
  • @user2190488 - I asked a similar question [here](http://stackoverflow.com/questions/41143080/how-to-prevent-android-chrome-magnifier-link-preview-when-when-user-clicks-on) with a slight difference - site isn't responsive so disabling zoom isn't an option - any other ideas ? Did you figure a way out ? – larrydalmeida Dec 28 '16 at 14:32
  • I have noticed that only the `width=device-width` bears significance in my case. My users can still zoom, but now this horendous onClick zoom is gone – Dharman May 12 '17 at 22:08
  • Will try this and edit the answer. which version of the browser are you running? – Armel Larcier May 14 '17 at 06:54
  • "user-scalable=no" didn't work for me in Android 5.1.1. But it only happens in fancybox iframe, and nomatter how big I make the buttons. Need to test to see if it happens also in any old iframe. – plugincontainer Oct 03 '17 at 10:31
  • Oh. Further to... the error was in the page that launches my fancybox iframe, There, on advise gleaned not sure when/where, I had set maximum-scale=0.8 (on the iframed pages it was maximum-scale=1.0). Changing 0.8 to 1.0 fixed it. – plugincontainer Oct 04 '17 at 10:14
1

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

Redivider
  • 144
  • 1
-1

It seems to work with this CSS declaration:

-webkit-touch-callout:none;
xampper
  • 91
  • 7