Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent iPhone from zooming form? [duplicate]

The code:

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

When I touch select, the iPhone zooms in that element (and does not zoom out after deselecting).

How can I prevent this? Or zoom back out? I can't use user-scalable=no because I actually need that functionality. It's for iPhone, select menu.

like image 651
Atadj Avatar asked Jun 16 '12 14:06

Atadj


2 Answers

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

like image 51
Supra Avatar answered Oct 24 '22 07:10

Supra


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.

like image 75
Andrea Turri Avatar answered Oct 24 '22 06:10

Andrea Turri