CODEWITHSUNDEEP
androidhtmliosgoogle-chromesafari
dcarr622
dcarr622

Reputation: 1706

How to disable zoom in Chrome on Android?

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

Upvotes: 17

Views: 31799

Answers (2)

nverba
nverba

Reputation: 4073

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

Upvotes: 13

Kelvin
Kelvin

Reputation: 5287

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.

Upvotes: 16

Related Questions