When a form element gets focus on iOs the browser zooms in on that element. Very handy in unoptimized layouts where that element might be a few pixels high but annoying and unnecessary in a mobile optimized layout. You can disable this behaviour by changing the meta viewport value onfocus and onblur.
Here’s a simple jQuery example:
$('input, select, textarea').focus(function(){
$('meta[name=viewport]').attr('content','width=device-width,initial-scale=1,maximum-scale=1.0');
});
$('input, select, textarea').blur(function(){
$('meta[name=viewport]').attr('content','width=device-width,initial-scale=1,maximum-scale=10');
});
Notice the tiny difference between focus and blur: onfocus you set the maximum-scale to 1 and onblur it’s set to 10. You shouldn’t use the code above, Wilfred Nas and Mathias Bynens optimized it in the comments to this snippet:
var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1));
});
The browser starts zooming in but immediately zooms out again when the elements gets focus. I like that.