代码：
<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，请选择菜单。
【问题讨论】：
标签： iphone html css ios html-select
可以通过将 font-size:16px 设置为所有输入字段来防止这种情况。
【讨论】：
input:active 上将字体大小设置为 16px 似乎可以在不改变明显字体大小的情况下达到目的。设计不变，但自动缩放功能被禁用。
更新： 此方法不再适用于 iOS 10。
它取决于视口，您可以通过这种方式禁用它：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
添加user-scalable=0，它也应该适用于您的输入。
【讨论】：
font-size: 16px 提供给：input[type="text"], input[type="number"], textarea。
对于 iOS，您可以通过简单地为输入元素分配操作系统认为足够的字体大小 (>=16px) 来避免缩放输入元素，从而避免缩放，例如：
input, select, textarea {
font-size: 16px;
}
它也是各种框架都使用的解决方案，可让您避免使用元标记。
【讨论】：
这可能有助于查看：
Disable Auto Zoom in Input "Text" tag - Safari on iPhone
您基本上需要捕获点击表单元素的事件，然后不运行默认的 iOS 放大操作，但仍允许它缩放页面的其余部分。
编辑：
链接提到，
2) 您可以使用 javascript 动态更改 META 视口标签 （请参阅使用 Javascript 在 iPhone Safari 上启用/禁用缩放？）
详细说明：
如果您在单击表单元素时无法更改标签，请放置一个模仿表单元素的 div，当您按下它时，它会更改标签，然后调用输入。
【讨论】：
设置字体大小的投票最多的答案对我不起作用。将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">');
});
}
});
似乎我们必须用模糊事件上的新值替换元标记，只是为了删除它似乎不会触发更新的行为。
请注意，UI 仍在初始化缩放，但它会很快再次缩小。我相信这是可以接受的，iPhone 用户一定已经习惯了浏览器在适用场景中无论如何都会进行一些动态缩放。
【讨论】：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
在 iOS10.0.1 上不再工作
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">' );
})
【讨论】：
如果您使用的是 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 中进行了测试，效果非常好！
【讨论】：
所以这是对我很有效的最终修复。
@media 屏幕和 (-webkit-min-device-pixel-ratio:0) { 选择， 文本区域， 输入 { 字体大小：16px！重要； } }【讨论】：
user-scalable=0 在元视口标签上设置。
这里的 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>');
}
【讨论】：
使用maximum-scale=1 而不是user-scalable=no 来防止表单缩放问题，而不会破坏用户捏缩放的能力。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
【讨论】：
我们在工作中遇到了这个问题，并找到了与@alex 类似的答案。如果是 iOS 设备，我们可以操作 viewport 标签：
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 正常工作。
【讨论】：