Prevent iPhone from zooming form?

For iOS, you can avoid zooming of input elements by simply allocating a font size to them that's considered sufficient by the OS (>=16px), thus avoiding the need to zoom, e.g.:

input, select, textarea {
    font-size: 16px;
}

It's a solution also utilized by various frameworks and allows you to avoid the use of a meta tag.

This might be helpful to look at:

Disable Auto Zoom in Input "Text" tag - Safari on iPhone

You'd basically need to capture the event of tapping on a form element, then not run the default iOS action of zooming in, but still allowing it to zoom for the rest of the page.

Edit:

The link mentions,

2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?)

To elaborate:

1. Viewport meta tag is set to allow zooming
2. User taps on form element, changes meta tag to disable zooming
3. Upon pressing done, viewport is changed to allow zoom

And if you can't change the tag when clicking on a form element, put a div that mimics the form element that when you press it, it changes the tag, then calls the input.

UPDATE: This method no longer works on iOS 10.

---

It depend from the Viewport, you can disable it in this way:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

add user-scalable=0 and it should work on your inputs as well.

This can be prevented by setting font-size:16px to all input fields.