Question

代码：

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

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

我该怎样防止这种情况？或缩小？我不能使用user-scalable=no因为我实际上需要这个功能。它适用于iPhone，选择菜单。

Answer 1

可以通过将font-size：16px设置为所有输入字段来防止这种情况。

Answer 2

<强>更新：此方法不再适用于iOS 10。

它取决于Viewport，你可以用这种方式禁用它：

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

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

Answer 3

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

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

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

Answer 4

这可能有助于查看：

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

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

编辑：

链接提及，

2）您可以使用javascript动态更改META视口标记（请参阅使用Javascript启用/禁用iPhone Safari的缩放功能？）

详细说明：

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

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

Answer 5

设置字体大小的最高投票答案对我不起作用。使用javascript to identify the client和答案中的元标记，我们可以防止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">');
        });
    }
});

似乎我们必须使用blur-event上的新值替换元标记，只是为了删除它似乎不会触发更新的行为。

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

Answer 6

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

在iOS10.0.1上不再工作

font-size:16px有效

Answer 7

设置字体大小适用于输入元素，但不适合我的选择元素。对于select标签，我需要在用户开始与select元素交互时主动禁用视口缩放，然后在完成时重新启用它。

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

如果您正在使用Bootstrap，那么只需找到一个简单的修复：

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

请参阅此页面上的第二个示例： http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

在iPhone SE上的Safari和Chrome中测试它，它就像一个魅力！

Answer 9

所以这是最终修复，对我来说很有效。


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

Answer 10

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

Answer 11

使用maximum-scale=1而不是user-scalable=no来防止表单缩放问题，而不会破坏用户捏住缩放的能力。

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

Answer 12

我们在工作中遇到了这个问题，并找到了与@alex类似的答案。如果它是iOS设备，我们可以对其进行操作：

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

这可以防止将窗体控件缩放到iOS上的焦点，并且仍然允许Android正常工作。

防止iPhone缩放形式？

12 个答案: