如何处理iOS Safari浏览器输入框聚焦时自动缩放的问题

方案1：动态控制viewport元标签（推荐） #

• 首先修改HTML中默认的viewport配置，移除全局缩放限制，添加id便于后续操作：

<meta name="viewport" content="width=device-width, initial-scale=1.0" id="viewportMeta">

• 在Angular根组件中添加全局聚焦/失焦监听逻辑，仅对iOS设备生效：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 获取viewport元标签
  private viewportMeta = document.getElementById('viewportMeta') as HTMLMetaElement;
  // 判断是否为iOS设备
  private isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

  // 监听全局聚焦事件
  @HostListener('focusin', ['$event'])
  onFocusIn(event: FocusEvent) {
    // 非iOS设备直接跳过
    if (!this.isIOS) return;
    const target = event.target as HTMLElement;
    // 仅针对输入框/文本域做处理
    if (['INPUT', 'TEXTAREA'].includes(target.tagName)) {
      // 聚焦时临时添加最大缩放限制，阻止系统自动缩放
      this.viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0';
    }
  }

  // 监听全局失焦事件
  @HostListener('focusout', ['$event'])
  onFocusOut(event: FocusEvent) {
    if (!this.isIOS) return;
    const target = event.target as HTMLElement;
    if (['INPUT', 'TEXTAREA'].includes(target.tagName)) {
      // 失焦后移除最大缩放限制，恢复用户手动缩放权限
      this.viewportMeta.content = 'width=device-width, initial-scale=1.0';
      // 可选：重置视口偏移，避免残留缩放导致的布局错位
      window.scrollTo(0, 0);
    }
  }
}

• 方案优势：仅在iOS设备输入框激活的短暂时间内限制缩放，其余场景和其他系统设备完全保留用户手动缩放权限，不会影响Chrome/安卓端的正常缩放功能，天然适配单页应用的页面切换逻辑。

方案2：CSS适配方案（无JS侵入） #

如果不想修改JS逻辑，可以通过调整输入框字号避免触发Safari的自动缩放规则：

• 给所有输入框、文本域设置最小16px的实际字号，若设计需要更小的显示效果，用transform缩放实现，Safari不会对transform缩放的元素触发自动缩放：

input, textarea {
  /* 实际字号设置为16px，避免触发自动缩放 */
  font-size: 16px !important;
}
/* 如需显示为14px效果，添加该类 */
.input-small {
  transform: scale(0.875);
  transform-origin: left center;
  /* 可适当调整宽度补偿缩放导致的尺寸缩小 */
  width: 114%;
}

• 方案优势：完全不涉及JS逻辑，永久保留所有场景下的用户手动缩放权限，适配性强。

内容的提问来源于stack exchange，提问作者bfredo123