How to trigger iPhone zoom-out after auto zoom-in to a form?
If the input's font-size is a minimum of 16px the zoom in will not be triggered to begin with.
I've used the following successfully.
$('input, select, textarea').on('focus blur', function(event) { $('meta[name=viewport]').attr('content', 'width=device-width,initial-scale=1,maximum-scale=' + (event.type == 'blur' ? 10 : 1)); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><head> <meta name="viewport" content="width=device-width,initial-scale=1" /></head><body> <input id="input" type="text" placeholder="Type here..." /></body>
Do you need or want to allow people to zoom at all? If not, have you set this meta tag in your head?
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />As far as I'm aware, that will stop the zoom issue in the first instance.