如何阻止iOS端Ionic Alert组件输入框触发页面自动缩放

解决方案 #

1. 修正viewport元标签配置

你之前配置maximum-scale=1不生效的核心原因是新版本iOS Safari默认忽略该参数，必须搭配user-scalable=no才会生效。配置位置在Ionic React项目的public/index.html的<head>标签内，替换原有的viewport元标签即可：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

2. 修改IonAlert输入框最小字体

Safari内置默认规则：当输入框字体小于16px时，点击输入会强制触发页面缩放，不受viewport配置限制。你可以在全局样式文件（如App.css、index.css）中添加如下样式，强制修改Alert内输入框的字体大小：

ion-alert .alert-input {
  font-size: 16px !important;
}

3. 兜底重置缩放逻辑

如果上述两个方案都没有完全解决问题，可以在Alert关闭回调中添加强制重置缩放的代码，每次关闭弹窗都主动复位页面缩放比例，修改你的组件代码如下：

<IonAlert
  isOpen={showAlert}
  onDidDismiss={() => {
    setShowAlert(false);
    // 强制重置页面缩放
    const viewport = document.querySelector('meta[name="viewport"]');
    if (viewport) {
      viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
    }
    document.body.style.transform = 'scale(1)';
    window.scrollTo(0, 0);
  }}
  buttons={[
    {
      text: 'Cancel',
      role: 'cancel',
    },
    {
      text: 'Save',
      role: 'save',
      handler: (e) => {
        saveHandler(e[0]);
      },
    },
  ]}
  header={`Change ${type}`}
  inputs={
    [
      {
        type: type === 'Name' ? 'text' : 'tel', 
        placeholder: getPlaceHolder(),
      },
    ]
  }
>
</IonAlert>

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