我用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的字体大小破坏了设计，则可能需要调整界面中的其他一些元素。

这对我有用：

input, textarea {
    font-size: initial;
}

令人惊讶的是，这里有很多javascript和视口的答案，只有一个提到了文本大小调整，这是我认为最好的解决方案。

您可以将此设置为无。

添加以下CSS：

* {
 -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

我花了一段时间才找到它，但这是我找到的最好的代码。。。。。。http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

我看了多个答案\

在元标签中设置最大比例=1的答案在iOS设备上运行良好，但在Android设备上禁用缩放功能。设置字体大小的字体：16px；onfocus对我来说太粗糙了。

所以我编写了一个JS函数来动态更改元标记。

var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
else
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

一条关于将字体大小设置为16px的顶级答案的评论询问了这是如何解决的，如果你想要更大/更小的字体怎么办。

我不知道你们所有人的情况，但使用px来调整字体大小并不是最好的方法，你应该使用它们。

我在我的响应网站上遇到了这个问题，我的文本字段大于16像素。我的表单容器设置为2em，输入字段设置为1.4em。在移动查询中，我根据视口更改html字体大小。由于默认的html是10，我的输入字段在桌面上计算为28px

为了取消自动缩放，我不得不将输入更改为1.6em。这将我的字体大小增加到32px。只是稍微高一点，几乎看不到。在我的iPhone 4和5上，我将html字体大小改为15像素（纵向），改回10像素（横向）。看起来像素大小的最佳点是48px，这就是为什么我从1.4em（42px）改为1.6em（48px）。

你需要做的事情是找到字体大小的最佳位置，然后将其转换为rem/em大小。