伪元素如：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 */

}

经过一段时间的尝试，我想出了这个解决方案

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

在“mousedown”时，它将输入的字体大小设置为16px。这将阻止缩放。在焦点事件中，它将字体大小更改回初始值。

与之前发布的解决方案不同，这将允许您将输入的字体大小设置为任意大小。

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

使用（悬停：无）和（指针：粗略）以所有触摸屏设备为目标：

这里的许多答案都依赖于部署JavaScript或jQuery。

但它应该（而且是）完全可以用CSS控制条件字体表示等问题。

Safari Mobile要求（有充分的理由）与任何表单元素交互时，其最小字体大小必须为16px（或视觉等效值）。

让我们致力于让经过深思熟虑的用户体验应用于所有触摸屏浏览器。

然后我们可以采取以下措施：

@media only screen and (hover: none) and (pointer: coarse) {

  input,
  select,
  textarea {
    font-size: 11px;
  }

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px;
  }
}

结果

当使用触摸屏设备时，当上面的任何交互式表单元素被聚焦时，该表单元素的字体大小被临时设置为16px。

这反过来会禁用iOS Safari Mobile自动缩放。

用户初始化的捏缩缩放在所有设备上都不受影响，并且永远不会被禁用。

将字体大小（用于输入字段）设置为等于正文的字体大小，似乎是阻止浏览器缩小或缩小的原因。我建议使用字体大小：1rem作为更优雅的解决方案。

请不要使用Javascript或黑客来使其工作。这将影响您在网络上的项目分数。

这将起到作用：

input, input:active, input:focus, input:focus-within, input:hover, input:visited {
    font-size: 16px!important;
}