Menu
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.
377
Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.
To disable pinch-zoom in HTML, simply add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> to the <head> section.
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
156
It's a known bug in Android browsers : http://code.google.com/p/android/issues/detail?id=11912
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
