html - 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">