阻止iPhone缩放表单？

守则：

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

家
关于
服务
接触

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

我怎样才能防止这种情况？还是缩小？我不能使用

user scalable=no

，因为我实际上需要这个功能。它适用于iPhone，请选择功能表。

更新： 此方法不再适用于iOS 10

---

它取决于视口，您可以通过以下方式禁用它：

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

---

添加

user scalable=0

，它也可以处理您的输入。

这可能有助于了解：

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

编辑：

链接提到,

2） 可以使用javascript动态更改元视口标记 （请参阅使用Javascript在iPhone safari上启用/禁用缩放？）

详细说明：

视口元标记设置为允许缩放

用户点击表单元素，更改元标记以禁用缩放

按“完成”后，视口将更改为允许缩放

---

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

这可以通过将字体大小：16px设置为所有输入字段来防止。

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

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

---

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

设置字体大小对于输入元素非常有效，但对于我来说，对于选择的元素则不行。对于选择标记，我需要在用户开始与选择元素交互时主动禁用视口缩放，然后在完成时重新启用它

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

//mousedown事件似乎是实现这一技巧的事件，而不是“focus”，因为在缩放已经发生之后，focus会触发。
$（'select'）.mousedown（函数（）{
$（'meta[name=viewport]'）。删除（）；
$（'head'）。追加（''）；
})
$（'select'）.focusout（函数（）{
$（'meta[name=viewport]'）。删除（）；
$（'head'）。追加（''）；
})

设置字体大小的得票最多的答案对我不起作用。与此处答案中的元标记一起使用，我们可以防止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">');
        });
    }
});

$（文档）.ready（函数（）
{
if（/iPhone/.test（navigator.userAgent）和&！window.MSStream）
{
$（文档）.on（“焦点”，“输入，文本区域，选择”，函数（））
{
$（'meta[name=viewport]'）。删除（）；
$（'head'）。追加（''）；
});
$（文档）.on（“模糊”，“输入，文本区域，选择”，函数（）
{
$（'meta[name=viewport]'）。删除（）；
$（'head'）。追加（''）；
});
}
});

似乎我们必须在模糊事件上用新值替换meta标记，只是删除它似乎不会触发更新的行为

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

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

不再在iOS10.0.1上工作

---

font-size:16px

works

刚刚找到一个简单的修复方法，如果您正在使用引导：

如w3s中所述：通过向元素添加.formgrouplg，可以快速调整水平表单中标签和表单控件的大小

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

大标签

请参见本页的第二个示例：

---

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

这是最后一个对我很有效的修复方法

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

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

@媒体屏幕和（-webkit最小设备像素比：0）{ 选择， 文本区， 输入{ 字体大小：16px！重要； } }

---

以下是jQuery解决方案对我来说非常有效

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

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

device_type=（ua.match（/iPad/i）| ua.match（/iPhone/）？“touchstart”：“单击”；
如果（设备类型==“touchstart”）{
$（'head'）.append（'input，select，textarea{font size:16px；}'）；
}

使用

最大比例=1

而不是

用户可缩放=否

来防止表单缩放问题，同时不破坏用户的缩放能力

---

我们在工作中遇到了这个问题，并找到了类似的答案。如果是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正常工作。

@Charlie-这会阻止整个网站的缩放，而不仅仅是表单。我需要网站上的缩放功能。我只是不希望它用于表单。请尝试将

font-size:16px

指定给：

input[type=“text”]、input[type=“number”]、textarea

。它从font-size:40px开始工作：）（视口设置为宽度=735px）。谢谢这将禁用缩放，使用字体大小以获得更好的用户体验。@Andreaturi至少可以编辑您的答案以节省人们的时间。它包含3个解决方案-没有一个能满足我的要求：（（2个在我的情况下不起作用）。使用可能的解决方案编辑谢谢@Charlie。您的解决方案确实像预期的那样工作，但另一个人建议了更简单的解决方案，这在我的情况下非常好。我只需要将SELECT的字体大小提高到40px（视区宽度=735px）.现在iPhone导航清晰易读，而且不会缩放。这对我来说非常有效。目前为止，这是最简单的解决方案，而且它与iOS的意图配合得很好：在文本太小而无法在手机上阅读时进行缩放。这似乎不再有效：/…我已经在iOS 9.0.2的iPhone 6上对其进行了测试…我去了美国