I have a website on mobile which looks like this (in iOS Safari) (the dark gray on the sides is outside of the website):
When I click an input, it becomes like this:
Then when I click out of the input, to go back to the website, it is like this, i.e. it stays zoomed in 🙁
After I click out of the input, I would expect it to regain the 16px of padding I have on the sides, and generally to “zoom back out”.
Is this a setting to tinker with in CSS or HTML somewhere?
The only iOS tag I have is this:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
How can I prevent this problem from happening? Also, is it possible to prevent the zoom in to an input in general? The main thing though is to recover from the zoom in and zoom back out when I leave the input…