How to disable zoom in Chrome on Android?

Question

trying to prevent zooming on a page in Chrome on Android, and it doesn\'t want to behave. I\'m using the code below, which works fine on the stock Android browser and Safar

Answer 1

Try adding minimum-scale=1 to your viewport meta tag - if that doesn't help, it's likely that disabling zoom isn't supported by Chrome for Android (HTC's proprietary browser intentionally doesn't allow you to disable zoom, for instance)

Update: I just checked, and it looks like Chrome does support disabling zoom, but you have two viewport tags in your code? The second one is likely overriding the first. Remove the second one.

See this list of mobile browser support for disabling zoom for details and a good suggestion for disabling zoom across multiple browsers.

Answer 2

I'm using the belt and braces approach, configuring all viewport settings available, as per developer.android.com's Targeting Screens from Web Apps

The following syntax shows all of the supported viewport properties and the general types of values accepted by each one:

<meta name="viewport"
  content="
    height = [pixel_value | device-height] ,
    width = [pixel_value | device-width ] ,
    initial-scale = float_value ,
    minimum-scale = float_value ,
    maximum-scale = float_value ,
    user-scalable = [yes | no] ,
    target-densitydpi = [dpi_value | 
     device-dpi | high-dpi | medium-dpi | low-dpi]
    " />

The configured meta tag for no zoom:

<meta name="viewport"
  content="
    height = device-height,
    width = device-width,
    initial-scale = 1.0,
    minimum-scale = 1.0,
    maximum-scale = 1.0,
    user-scalable = no,
    target-densitydpi = device-dpi
    " />

And as a one liner:

<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />