Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

How to prevent google chrome android browser to display the magnifier when users click a button?

Tags:

javascript

html

browser

android

google-chrome

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?

like image 542
Armel Larcier Avatar asked Oct 19 '12 10:10

Armel Larcier

People also ask

How do I turn off double tap zoom on Chrome?

In future versions of Chrome for Android, the double tap will be removed when you have a viewport set. If you want to disable it for stable today, you will need to set user-scalable=no in your viewport. This will disable zooming (which may be bad for accessibility) but should allow you to get all touch events.

Why is Google zoomed in on Android?

As stated earlier, the Android stuck zoomed in could very well be caused by insufficient cache memory available in your phone. In this case, you must clear up the cache from the settings to get rid of any display glitches.

Why is Chrome zoomed?

By default, Chrome sets the zoom level to 100%. To manually adjust the settings, use the Ctrl key and “+” or “-” combos to increase or decrease the page magnification. If you are using a mouse, you can hold down the keyboard Ctrl key and use the mouse wheel to zoom in or out.

2 Answers

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!

like image 96
Armel Larcier Avatar answered Oct 14 '22 16:10

Armel Larcier

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

like image 34
Redivider Avatar answered Oct 14 '22 18:10

Redivider
Sign in to Comment

Related questions

Remove Styles from Text when Copying / Cutting using CSS or Javascript
Javascript Regex- replace sequence of characters with same number of another character
Knockout.js ViewModel change callback?
How to find the height of an element that is not displayed
How to check if there is already a click/event associated to an element
Is event.currentTarget always equal to $(this) in jQuery?
Defining a JavaScript regular expression that matches anything except a particular string
DOM : How to detect a new child elements?
Want to make static SVG plot (from matplotlib) interactive via the browser
HTML5 video behavior on mobile devices
Space filling with circles of unequal size
Simple click on labels makes double click
What's IE take on HTMLDocument and HTMLElement
Why sometime scrollTop/scrollLeft not writable?
Validate Canadian Postal Code Regex
Testing JavaScript views in Rails
Accepting the animation
How to create a visual diff view like Stack Overflow does?
jQuery detach() v/s remove() v/s hide() [closed]
IE8 - input (type="file") get files

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!