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

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

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

如果字体大小小于16px，并且表单元素的默认字体大小为11px（至少在Chrome和Safari中），浏览器将进行缩放。

此外，select元素需要附加焦点伪类。

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

不需要使用以上所有内容，您可以只设置所需元素的样式，例如：仅文本、数字和文本区域：

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

使输入元素从父样式继承的替代解决方案：

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

顺便说一下，如果您使用Bootstrap，您可以只使用此变体：

.form-control {
  font-size: 16px;
}

我不得不“修复”一个荷兰大学网站的表单控件自动缩放问题（表单控件中使用了15px）。我提出了以下一组要求：

用户必须仍然能够放大字体大小必须保持不变没有暂时不同风格的闪光无jQuery要求必须在最新的iOS上运行，不得妨碍任何其他OS/设备组合如果可能，没有魔法超时，如果需要，正确清除计时器

这是我到目前为止想到的：

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

一些注意事项：

注意，到目前为止，我只在iOS 11.3.1上测试了它，但很快将在其他几个版本上测试它focusIn事件的使用意味着它至少需要iOS 5.1（但我认为我们在早于9的iOS版本中创建的网站是一个很酷的奖励）使用事件委派，因为我工作的许多站点都有可能动态创建表单控件的页面将eventListeners设置为html元素（documentElement），这样就不必等待body变为可用（不需要检查文档是否已就绪/已加载状态或需要等待DOMContentLoaded事件）

不用简单地将字体大小设置为16px，您可以：

设置输入字段的样式，使其大于预期大小，允许将逻辑字体大小设置为16px。使用scale（）CSS转换和负边距将输入字段缩小到正确的大小。

例如，假设输入字段最初的样式为：

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

如果通过将所有维度增加16/12=133.33%来放大字段，然后使用scale（）将其减少12/16=75%，则输入字段将具有正确的视觉大小（和字体大小），并且焦点上不会有缩放。

由于scale（）只影响视觉大小，因此还需要添加负边距以减小字段的逻辑大小。

使用此CSS：

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

输入字段的逻辑字体大小为16px，而文本大小为12px。

我有一篇博客文章，在这里我将稍微详细介绍一下，并将此示例作为可查看的HTML：iPhone上Safari无输入缩放，像素完美方式

我找不到干净的方法，但这里有一个黑客。。。

1） 我注意到mouseover事件发生在缩放之前，但缩放发生在mousedown或focus事件之前。

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

因此，请尝试以下操作（如jquery所示）：

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

这绝对是一个黑客。。。在某些情况下，mouseover/down并不总是捕捉入口/出口，但它在我的测试中运行良好，是一个坚实的开始。