我不得不“修复”一个荷兰大学网站的表单控件自动缩放问题（表单控件中使用了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事件）

我花了一段时间才找到它，但这是我找到的最好的代码。。。。。。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));
});

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

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

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

解决此问题的正确方法是将元视口更改为：

<meta name=“viewport”content=“width=设备宽度，初始比例=1，最大比例=1，用户可缩放=0”/>

重要提示：不要设置最小刻度！这将保持页面可手动缩放。

如果字体大小小于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;
}

这对我有用：

input, textarea {
    font-size: initial;
}