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

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

Answer 2

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 3

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 4

This might be helpful to look at:

Disable Auto Zoom in Input "Text" tag - Safari on iPhone

You'd basically need to capture the event of tapping on a form element, then not run the default iOS action of zooming in, but still allowing it to zoom for the rest of the page.

Edit:

The link mentions,

2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?)

To elaborate:

1. Viewport meta tag is set to allow zooming
2. User taps on form element, changes meta tag to disable zooming
3. Upon pressing done, viewport is changed to allow zoom

And if you can't change the tag when clicking on a form element, put a div that mimics the form element that when you press it, it changes the tag, then calls the input.

Answer 5

The most up voted answer to set the font-size does not work for me. Using javascript to identify the client together with the meta tags in the answers here, we can prevent the zooming behavior of iPhone on input focus while otherwise keeping the zooming functionality intact.

$(document).ready(function ()
{
    if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
    {
        $(document).on("focus", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
        });

        $(document).on("blur", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
        });
    }
});

It seems like we have to replace the meta tag with new values on the blur-event, just to remove it does not seem to trigger an updated behavior.

Note that the UI is still initializing the zoom, but it quickly zooms back out again. I believe this is acceptable and iPhone users must already be accustomed to that the browser is having some dynamic zooming going on anyway in applicable scenarios.

Answer 6

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

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">' );
})

Answer 8

Just found a simple fix if you're using Bootstrap:

As mentioned in w3s: You can quickly size labels and form controls within a Horizontal form by adding .form-group-lg to the element.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="control-label">Large Label</label>
    <div>
      <input class="form-control" type="text">
    </div>
  </div>

See second example on this page: http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

Tested it in Safari and Chrome on an iPhone SE and it works like a charm!

Answer 9

So here is the final fix which works well for me.

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

Answer 10

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 11

Use maximum-scale=1 instead of user-scalable=no to prevent the form zooming issue without breaking the user’s ability to pinch zoom.

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

Answer 12

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.