Html 阻止 iPhone 缩放表单？

Prevent iPhone from zooming form?

提问by Atadj

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

当我触摸 时select，iPhone 会放大该元素（取消选择后不会缩小）。

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

我怎样才能防止这种情况？还是缩小回来？我无法使用，user-scalable=no因为我实际上需要该功能。它适用于 iPhone，选择菜单。

回答by Supra

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

这可以通过为所有输入字段设置 font-size:16px 来防止。

回答by Andrea Turri

UPDATE: This method no longer works on iOS 10.

更新：此方法不再适用于 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=0and it should work on your inputs as well.

添加user-scalable=0它也应该适用于您的输入。

回答by codingmechanic

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

对于 iOS，您可以通过简单地为它们分配操作系统认为足够的字体大小 (>=16px) 来避免缩放输入元素，从而避免缩放的需要，例如：

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.

它是各种框架也使用的解决方案，允许您避免使用元标记。

回答by Charlie

This might be helpful to look at:

这可能有助于查看：

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

在输入“文本”标签中禁用自动缩放 - iPhone 上的 Safari

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.

您基本上需要捕获点击表单元素的事件，然后不运行放大的默认 iOS 操作，但仍允许它缩放页面的其余部分。

Edit:

编辑：

The link mentions,

链接提到，

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

2) 您可以使用 javascript 动态更改 META 视口标签（请参阅使用 Javascript 在 iPhone Safari 上启用/禁用缩放？）

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

1. 视口元标记设置为允许缩放
2. 用户点击表单元素，更改元标记以禁用缩放
3. 按完成后，视口将更改为允许缩放

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.

如果您在单击表单元素时无法更改标签，请放置一个模仿表单元素的 div，当您按下它时，它会更改标签，然后调用输入。

回答by Alex

The most up voted answer to set the font-size does not work for me. Using javascript to identify the clienttogether 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.

设置字体大小的最高投票答案对我不起作用。使用javascript与此处答案中的元标记一起识别客户端，我们可以防止 iPhone 在输入焦点上的缩放行为，同时保持缩放功能不变。

$(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.

请注意，UI 仍在初始化缩放，但它会再次快速缩小。我相信这是可以接受的，iPhone 用户一定已经习惯了浏览器在适用场景中无论如何都会进行一些动态缩放。

回答by atorgfr

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

Not working anymore on iOS10.0.1

不再在 iOS10.0.1 上工作

font-size:16pxworks

font-size:16px作品

回答by gregkerzhner

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

回答by Hugo Lauzon

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

如果您使用的是 Bootstrap，刚刚找到了一个简单的修复方法：

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

如 w3s 中所述：您可以通过将.form-group-lg添加到元素来快速调整水平表单中的标签和表单控件的大小。

<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

请参阅此页面上的第二个示例：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!

在 iPhone SE 上的 Safari 和 Chrome 中对其进行了测试，效果非常好！

回答by Adeel Malik

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

回答by jalalBK

here is the jQuery Solution works well for me.

这是 jQuery 解决方案对我来说效果很好。

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