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

Setting the viewport user-scalable property on touchstart did it for me, no need to remove then re-add simply change it on touchstart then enable again on blur. Means the user can't zoom whilst focused on the field but a small price to pay I think.

var zoomEnable;

zoomEnable = function() {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes");
};

$("input[type='text']").on("touchstart", function(e) {
  $("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no");
});

$("input[type='text']").blur(zoomEnable);