我用jQuery也做到了这一点：

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

当然，如果16px的字体大小破坏了设计，则可能需要调整界面中的其他一些元素。

如果你的网站是为移动设备设计的，你可以决定不允许扩展。

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

这解决了移动页面或表单“浮动”的问题。

总之，答案是：将表单元素的字体大小设置为至少16px

由于iPhone上的自动放大（没有缩小）功能仍在运行，这里有一个基于dlo建议的JavaScript，用于聚焦/模糊。

一旦文本输入被功能化并在输入离开时重新合成，缩放将被禁用。

注意：有些用户可能不欣赏在小文本输入中编辑文本！因此，我个人更喜欢在编辑过程中更改输入的文本大小（参见下面的代码）。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

以下代码将在元素具有焦点期间将输入的文本大小更改为16像素（即，以当前缩放大小计算）。因此，iPhone不会自动放大。

注：缩放因子是根据window.innerWidth和iPhone的320像素显示屏计算的。这仅对处于肖像模式的iPhone有效。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

这个问题的简单解决方案是：

@media screen and (max-width: 599px) {
  input, select, textarea {
    font-size: 16px;
  }
}

注：最大宽度可根据您的要求定制。

伪元素如：focus不再像以前那样工作。从iOS 11，可以在主样式之前添加一个简单的重置声明（前提是不要用较小的字体大小覆盖它们）。

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

值得一提的是，对于Tachyons.CSS这样的CSS库，很容易意外覆盖字体大小。

例如，class:f5相当于：fontSize:1rem，如果您将主体字体比例保持为默认值，则可以使用。

但是：如果您选择字体大小class：f6，则在向上的小屏幕上，这将相当于fontSize:.875rem。在这种情况下，您需要更具体地说明重置声明：

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}