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

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并不总是捕捉入口/出口，但它在我的测试中运行良好，是一个坚实的开始。

我看到这里的人用JavaScript或viewport函数做了一些奇怪的事情，并关闭了所有设备上的手动缩放。我认为这不应该是一个解决方案。添加此CSS片段将关闭iOS中的自动缩放功能，而不会将字体大小更改为固定数字，如16px。

默认情况下，我在输入字段中使用93.8%（15px）的字体大小，通过添加CSS代码段，字体大小保持在93.8%。无需更改为16px或将其设置为固定数字。

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

正如许多其他答案已经指出的那样，这可以通过向元视口标记添加最大比例来实现。然而，这会导致在Android设备上禁用用户缩放功能。（自v10以来，它不会在iOS设备上禁用用户缩放。）

当设备为iOS时，我们可以使用JavaScript动态地向元视口添加最大比例。这实现了两全其美：我们允许用户缩放，并防止iOS缩放到聚焦的文本字段。

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

代码：

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

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

在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>

我看了多个答案\

在元标签中设置最大比例=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";