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 Safari on iOS. Any thoughts?

<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' name='viewport' />

    <meta name="viewport" content="width=device-width" />

Your second meta viewport tag overrides the first one. See http://stackoverflow.com/questions/11345896/full-webpage-and-disabled-zoom-viewport-meta-tag-for-all-mobile-browsers/12270403 — Rubinsh, Feb 07 '13 at 06:56

score 16 · Accepted Answer · edited May 23 '17 at 12:34

16

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.

edited May 23 '17 at 12:34

Community

1
1

answered Nov 10 '12 at 13:28

Kelvin

5,227
1
23
36

1

actually it worked, I posted previous comment prematurely, since edited. thanks for the tip! – dcarr622 Nov 10 '12 at 13:44

score 13 · Answer 2 · answered Nov 19 '12 at 14:51

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" />

How to disable zoom in Chrome on Android?

2 Answers2

Linked