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

Answer 1

If you set font size of input to 16px the zoom stops. Mobile browsers assume anything less than 16px means the users will need to zoom so why don't i do it myself.

 input[type='text'],input[type='number'],textarea {font-size:16px;}
 body{ -webkit-text-size-adjust:none;}

You may also set the below meta tag but it prevent user scaling completely.

If you want user scaling but only disable input scaling try this

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('');
}

also try this