javascript - Disable zoom on input focus in Android webpage

Question

Here's the dilema, I have a webpage (only for android devices) and in that page I have an input box (a text box specifically) and when it gets focus the browser zooms in. I don't want it to zoom in - sounds easy, right?

Here's where it gets fun: I have to be able to zoom in general so don't say

<meta name='viewport' content='user-scalable=0'>

That won't work for me.

Also, the input box doesn't receive click events. It appears when another button is clicked a gets focus programmatically.

Here's what I've tried and they've failed so far:

jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');

This also failed:

<input type='text' onfocus="return false">

And this:

jQuery("#locationLock input").focus(function(e){e.preventDefault();});

Any ideas?

Answer 1

The following worked for me (Android Galaxy S2):

<meta name="viewport" content="width=device-width, height=device-height,  initial-scale=1.0, user-scalable=no;user-scalable=0;"/>