Prevent iPhone from zooming form?

Question

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.

Answer 1

We ran into this issue at my work and found a similar answer to @alex. We can manipulate the viewport tag if it is an iOS device:

document.addEventListener('DOMContentLoaded', event => {
  if (/iPhone/.test(navigator.userAgent) && !window.MSStream) {
    const metaViewportTag = document.head.querySelector('meta[name="viewport"]')
    metaViewportTag.content = 'width=device-width, initial-scale=1, maximum-scale=1'
  }
})

This prevents zooming form controls on focus in iOS and still allows Android to work as normal.

Answer 2

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

Not working anymore on iOS10.0.1

font-size:16px works

Answer 3

here is the jQuery Solution works well for me.

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input,  select, textarea {font-size: 16px;}</style>');
}

Answer 4

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.

Answer 5

For iOS, you can avoid zooming of input elements by simply allocating a font size to them that's considered sufficient by the OS (>=16px), thus avoiding the need to zoom, e.g.:

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

It's a solution also utilized by various frameworks and allows you to avoid the use of a meta tag.

Answer 6

Setting the font size works perfectly for input elements, but not for select elements for me. For select tags, I need to actively disable viewport zoom when the user starts interacting with the select element, and then reenable it on finish.

//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})

$('select').focusout(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})