CODEWITHSUNDEEP
androidgoogle-chromehyperlinkzooming
user1576074
user1576074

Reputation: 41

How to disable ul li link zoom in android chrome

How to disable this link zoom tool in android chrome from html/js/css code.

  <ul id="dropdown_address_block">
    <li> <a href="map_all">Все мастерские на карте</a> </li>
    <li><a href="vo17line">В.О. 17-я линия, 66 (24 часа)</a> </li>
...
    </ul>

link zoom

Upvotes: 2

Views: 1407

Answers (2)

L&#39;Arrogante
L&#39;Arrogante

Reputation: 21

You have to add this meta tag:

<meta name="viewport" content="user-scalable=0, width=<your_width>, minimum-scale=1.0"></meta>

into the <head> section of your page. You'll have to change according to your layout: if your page should be rendered according to a certain layout/document dimension, you'll have to declare the explicit layout width (ie: width=1024). If your layout should adapt to the device screen resolution, you'll have to set: width=device-width.

Also is important to stress that the accepted values for the user-scalable part are [0,1] for Android (from api level 16, if I'm not wrong) and [yes, no] for iOS.

Upvotes: 2

Kinlan
Kinlan

Reputation: 16597

There are a couple of things that you can do:

  1. Ensure you have a viewport
  2. Increase the touchable area (i.e, increase font size)
  3. Space the elements out with more margin around the element so that Chrome clearly understand what you clicked on

At a high level I tried to explain what Chrome does here when determining if the click should be handled or if the magnifier should be shown: http://mobile-ux.appspot.com/#31 but can be summarised as:

  • Creates Tap target box around where the user tapped
  • Adds a larger bounding box around tap
  • Finds all targets with bounding box
  • Scores each element for closeness to touch
  • Finds the closest
  • Compares score to all elements
  • If > 1 element near then show magnifier

Implementation

Upvotes: 2

Related Questions