How to disable web page zooming/scaling on Android?

Question

I have written a small web app to collect some data and store it in a central database. I'm walking around, reading values and typing them into a web site on my Android smartphone. It's just for me, so no public usability concerns apply this time.

Now I want to add a button to increment a reading by one, and I need to be able to push that button several times. But if I do it too fast, the browser recognises a double-tab and scales/zooms into the page.

I have added a viewport header already and played with every value combination I could find on the web. But the page remains scalable. How can I stop that?

Here's a minimal test page that fails for me:

<!doctype html>
<html>
<head>
<title>Test page</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style type="text/css">
body
{
    font: 16pt sans-serif;
}
</style>
</head>
<body>
This is a test page. It should not be scalable by the user at all. Not with the two-pinger pinch gesture and even less with a double-tap on the text.
</body>
</html>

Adding initial-scale=1, maximum-scale=1 and all sorts of target-whateveritwas-dpi doesn't change a thing. I have restarted the browser (Dolphin HD and the stock browser) and cleared the cache already. I'm on Android 2.2, the phone is an HTC Desire.

Have you found a solution? I got the same problem on Samsung device and HTC? Meta tags not working.. — Renato H., Nov 03 '11 at 13:48
This comment poses a very similar question, and the answer was apparently that you have to live with it: http://stackoverflow.com/questions/7073396/disable-zoom-on-input-focus-in-android-webpage — hotshot309, Jul 03 '12 at 15:24

score 47 · Answer 1 · edited May 23 '17 at 12:22

This worked for me in all android browsers:

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

A common mistake is that people use 2 meta viewport tags like this:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />

The second meta viewport tag overrides the first one in some browsers (for example - chrome for android). There is no reason to have two meta viewport tags, as the second one is contained within the first one.

See This answer for more details

score 12 · Accepted Answer · answered Jan 01 '12 at 12:33

12

It's a known bug in Android browsers : http://code.google.com/p/android/issues/detail?id=11912

answered Jan 01 '12 at 12:33

Hades

2,071
1
21
34

That sounds very reasonable. Accepted, given the low number of other helpful answers. – ygoe Jan 01 '12 at 22:12
7

"user-scalable=no" has never worked for me, instead I use "user-scalable=0" which seems to work a treat. – frddsgn Aug 21 '12 at 10:02
@dvdfrddsgn That might work but I don't think that is valid based on the `user-scalable` [API](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) – JohnnyQ Jul 23 '19 at 23:38

score 3 · Answer 3 · answered Dec 06 '13 at 08:21

3

I have tried all of them but not work for me. And I found this one really work.

     <!-- set viewport to native resolution (android) - disable zoom !-->
   <meta 
       name="viewport" 
       content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" 
    />

from http://andidittrich.de/index.php/2012/02/disable-zoom-function-of-android-browser-force-native-resolution/

answered Dec 06 '13 at 08:21

babyromeo

465
5
11

I had the same problem and this is the only working solution for: android browser, chrome and iPhone. – Ronny Sherer Mar 27 '14 at 14:42

score 1 · Answer 4 · answered Feb 14 '13 at 00:47

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

Meta Viewport tag does solve the problem in most of the cases. But Android has a strange issue where on orientation change the meta tag is reset and you can scale or zoom the page again.

For fixing this issue in Android monitor orientaionchange and set meta viewport tag on every orientationchange event.

Here is the link with code snippet http://moduscreate.com/orientation-change-zoom-scale-android-bug/

score -1 · Answer 5 · answered Aug 21 '12 at 10:02

-1

"user-scalable=no" has never worked for me, instead I use "user-scalable=0" which seems to work a treat.

answered Aug 21 '12 at 10:02

frddsgn

779
1
14
24

Doesn't work for me either. I can still zoom in with that setting. Seems like Android (2.2) simply cannot do it. – ygoe Aug 24 '12 at 19:10

score -2 · Answer 6 · answered Mar 09 '12 at 08:48

Use below lines of Code :

Check the application Samsung Galaxy S there it is supporting. But when I am opening the same link inside the Galaxy Ace there Turn Off the Zooming is not supporting.

Please Check your application some Other mobile and check. Please go through below link you will get the Idea:

http://garrows.com/?p=337

score -4 · Answer 7 · edited May 23 '17 at 11:58

-4

Try all of this at the same time (extracted from here):

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

Then tell us your experience

edited May 23 '17 at 11:58

Community

1
1

answered Oct 14 '11 at 21:45

A.Quiroga

5,609
5
33
56

Sorry for the late response, Stackoverflow notifications have worked better in the past. Your suggested code doesn't change anything at all. I can still zoom the page. – ygoe Nov 19 '11 at 21:09

How to disable web page zooming/scaling on Android?

7 Answers7