防止iPhone缩放forms？
代码：
<select> <option value="1">Home</option> <option value="2">About</option> <option value="3">Services</option> <option value="4">Contact</option> </select> 当我触摸select ，iPhone放大该元素（并且在取消select后不缩小）。
我怎样才能防止这个？ 或缩小回来？ 我不能使用user-scalable=no因为我实际上需要这个function。 这是iPhone的select菜单。
更新 ：此方法不再适用于iOS 10。
它依赖于视口，你可以通过这种方式禁用它：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
添加user-scalable=0 ，它也应该在你的input。
这可以通过设置字体大小：16px到所有input字段来防止。
对于iOS，您可以通过简单地为操作系统（> = 16px）分配足够的字体大小来避免缩放input元素，从而避免需要缩放，例如：
input, select, textarea { font-size: 16px; }
这也是各种框架所使用的解决scheme，并且可以避免使用元标记。
这可能有助于看看：
禁用自动缩放input“文本”标签 – iPhone上的Safari
你基本上需要捕获点击一个表单元素的事件，然后不运行放大的默认iOS操作，但仍然允许它放大页面的其余部分。
编辑：
链接提到，
2）你可以dynamic地改变使用javascript的META视口标签（请参阅启用/禁用使用JavaScript Safari Safari的缩放？）
详细说明：
- 视口元标记设置为允许缩放
- 用户点击表单元素，更改元标记以禁用缩放
- 按完成后，视口被更改为允许缩放
如果在单击表单元素时无法更改标签，请使用模仿表单元素的div，当您按下该元素时，它会更改标签，然后调用input。
最大的投票答案设置字体大小不适合我。 使用javascript来识别客户端和meta标签，我们可以防止iPhone在input焦点上的缩放行为，同时保持缩放function的完整性。
$(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上的新值replace元标记，只是要移除它似乎不会触发更新的行为。
请注意，用户界面仍在初始化缩放，但它会迅速缩小。 我相信这是可以接受的，iPhone用户必须已经习惯了浏览器在适用的情况下正在进行一些dynamic缩放。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
在iOS10.0.1上不再工作
font-size:16px作品
设置字体大小适用于input元素，但不适用于我select的元素。 对于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">' ); })
刚刚find一个简单的修复，如果你使用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进行testing，它就像一个魅力！
所以这里是最适合我的最终解决scheme。
@media屏幕和（-webkit-min-device-pixel-ratio：0）{
select，
textarea的，
input{
font-size：16px！important;
}
}
