一条关于将字体大小设置为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大小。

input[type='text'],textarea {font-size:1em;}

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

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

这里的许多答案都依赖于部署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自动缩放。

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

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

在Angular中，您可以使用指令来防止IOS设备上的焦点缩放。没有保留可访问性的元标记。

import { Directive, ElementRef, HostListener } from '@angular/core';

const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;

@Directive({ selector: '[noZoomiOS]' })

export class NoZoomiOSDirective {
  constructor(private el: ElementRef) {}

@HostListener('focus')
  onFocus() {
    this.setFontSize('');
  }

@HostListener('mousedown')
  onMouseDown() {
    this.setFontSize(`${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px`);
  }

private setFontSize(size: string) {
  const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);

  if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
      return;
   }

  const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  iOS 
     && (this.el.nativeElement.style.fontSize = size);
 }
}

在*.module.ts中声明后，可以像这样使用<input noZoomiOS>