Prevent iPhone from zooming in on `select` in web-app

user_502236 0
Viewed 108662

I've got this code:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

Running in a full-screen web-app on iPhone.

When selecting something from this list, the iPhone zooms in on the select-element. And doesn't zoom back out after selecting something.

How can I prevent this? Or zoom back out?

iphone-web-app css html javascript
12 Answers

iOS zooms the page to show a larger input field if its font-size is less than 16px.

only On click of any field, it's zooming the page. so on click, we are making it as 16px and then changed to default value

below snippet works fine to me and targeted for mobile devices,

@media screen and (max-width: 767px) {
 select:active, input:active,textarea:active{
        font-size: 16px;
 }
}

user_99782310

Set all 'select' font size to 16px

select{ font-size: 16px; }

user_15674280

As answered here: Disable Auto Zoom in Input "Text" tag - Safari on iPhone

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

user_12910000

Try adding this CSS to disable Ios' default styling:

-webkit-appearance: none;

This will also work on other elements that get special styling, like input[type=search].

user_74473970

Been reading for a few hours on this and the best solution is this jquery here. This also helps with the "next tab" option in iOS Safari. I have inputs here as well but feel free to remove them or add as you like. Basically the mousedown fires before the focus event and tricks the browser into thinking its 16px. In addition, the focusout will trigger on the "next tab" feature and repeat the process.

$(function(){
    $('input, select').on("mousedown focusout", function(){
        $('input, select').css('font-size','16px');
    });
    $('input, select').on("focus", function(){
        $('input, select').css('font-size','');
    });
})
user_37731140
Related