Menu
I have spent all day looking for a solution, and this site keeps coming up, SO why not ask you guys.
I an building our companies mobile website and we want to disable the auto zoom mobile devices use to zoom into text/search/email inputs when they are focused on. I am building the site in HTML5 and have seen/tested the <meta name="viewport" content="width=device-width, user-scalable=no" /> solution. With various properties (ie. minimum-scale=#, maximum-scale=#" ) This, works in almost ALL mobile devices I am testing on. Only one problem. I want the user to be able to zoom in/out at their leisure. (we have some higher res product shots that would be nice to see up close)
How can I disable zooming in when clicking on input tags, while retaining full manual user zoom control?
p.s the site also uses jQuery. So any thoughts using that might help.
thank you Jrak
697
In order to stop mobile browser to zoom in on focus on input field we just have to change font size for input field. The reason why mobile browser is zooming in is to make text larger so that user can read it.
Giving a meta tag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Prevent zooming all together by adding this meta tag to your head tag. This tells the mobile browser to use the same width scale and will not allow the user to zoom in at all, hence also disables that annoying behavior.
The first method in which to prevent form input zooming is to add a meta tag (or edit the existing one) in your site's header area. Add the following meta tag and the zooming is prevented via a maximum scale directive.
Setting the meta tag in the <head> like this worked for me:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
