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

Question

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?

Answer 1

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

Answer 2

iPhone's will zoom form fields slightly if the text is set to less than 16 pixels. I'd suggest setting the mobile form field's text to be 16 pixels and then override the size back down for desktop.

The answers saying to disable zoom are unhelpful for partially sighted users may still want to zoom on smaller mobiles.

Example:

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

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Answer 3

It is probably because the browser is trying to zoom the area since the font size is less than the threshold, this generally happens in iphone.

Giving a metatag attribute "user-scalable=no" will restrict the user from zooming elsewhere. Since the problem is with select element only, try using the following in your css, this hack is originally used for jquery mobile.

HTML :

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS:

select{
font-size: 50px;
}

src: unzoom after selecting in iphone

Answer 4

I don't think you can't do anything about the behavior in isolation.

One thing you can try is keep the page from zooming at all. This is good if your page is designed for the phone.

<meta name="viewport" content="width=device-width" />

Another thing you could try is using a JavaScript construct instead of the generic "select" statement. Create a hidden div to show your menu, process the clicks in javascript.

Good luck!

Answer 5

This seemed to work for my case in addressing this issue:

@media screen and (-webkit-min-device-pixel-ratio: 0) {
select:focus, textarea:focus, input:focus {
        font-size: 16px;
    }
}

Suggested here by Christina Arasmo Beymer

Answer 6

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].