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

Question

I made an HTML page that has an `<input>` tag with `type="text"`. When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?

Answer 1

You can prevent Safari from automatically zooming in on text fields during user input without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute suggested in other answers.

It is a worthwhile option if you have a form in a layer that “floats” around if zoomed, which can cause important UI elements to move off-screen.

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

However, the browser will zoom if the font size is less than 16px and the default font size for form elements is 11px (at least in Chrome and Safari).