0

I have a responsive layout that works great in mobile safari (iOS), but on chrome (Android) a strange thing is happening: there is a vertical navigation and if i click on some link that is in not at the end of the navigation - chrome "opens" sort of a popup displaying a zoomed in version of the area i clicked on and allows me to choose more precisely which link to click.

  • What is this behavior called?
  • Is there a way to disable it from HTML/CSS ?

Thanks

Marius
  • 3,976
  • 5
  • 37
  • 52
  • Can you add your HTML markup, or even better a live example, at a guess I presume the `meta-tag` may need revising. – mikedidthis Jan 31 '14 at 23:27
  • That is a native android behavior in later versions. I'll try to find out what it's called – ntgCleaner Jan 31 '14 at 23:35
  • 1
    It's called "Enable link preview" Search for that here http://www.chromestory.com/chrome-for-android-a-mini-user-guide/ – ntgCleaner Jan 31 '14 at 23:41
  • @ntgCleaner thanks, looks like that's the thing i'm looking for. Unfortunately, there's no such thing i settings, not to mention disabling it in HTML/CSS. There are suggestions to use viewport approach, but that didn't seem logical; still - tried it - didn't work. – Marius Feb 02 '14 at 20:20

1 Answers1

0

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.

This fixes the annoying popup issue on Android Chrome.

L'Arrogante
  • 21
  • 2