CODEWITHSUNDEEP
androidhtmlscalingviewport
ygoe
ygoe

Reputation: 20364

How to disable web page zooming/scaling on Android?

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.

Upvotes: 26

Views: 69353

Answers (7)

babyromeo
babyromeo

Reputation: 495

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/

Upvotes: 3

Ankit Garg
Ankit Garg

Reputation: 384

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

Upvotes: 1

Rubinsh
Rubinsh

Reputation: 4983

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

Upvotes: 48

davidford.me
davidford.me

Reputation: 834

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

Upvotes: -1

mayur rahatekar
mayur rahatekar

Reputation: 4460

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

Upvotes: -2

Hades
Hades

Reputation: 1985

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

Upvotes: 13

A.Quiroga
A.Quiroga

Reputation: 5722

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

Upvotes: -4

Related Questions