React.js移动端网页如何彻底禁用点击输入框触发的自动缩放

针对MUI TextField组件点击触发页面自动缩放的问题，按以下优先级逐一配置，可彻底解决该问题：

• 配置正确的viewport元标签
  将以下标签放在HTML文件<head>的最靠前位置，确保页面初始加载时就加载到缩放规则，不要通过客户端JS动态插入：

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

SSR框架（Next.js/Remix等）需要确保该标签在服务端渲染阶段就输出到HTML中，客户端动态插入会导致规则不生效。

• 修正MUI TextField输入字体大小，绕过iOS强制缩放规则
  这是90%以上配置了viewport仍不生效的核心原因：iOS Safari内置硬编码规则，当聚焦的输入元素字体大小小于16px时，会自动触发页面缩放保证可读性，该规则不受viewport标签控制。MUI默认输入框字体为14px，刚好命中缩放阈值，可通过单组件配置或全局主题覆写修复：

// 单组件快速修复示例
<TextField
  sx={{
    '& .MuiInputBase-input': {
      fontSize: '16px !important', // 字体大小必须≥16px，避免用rem单位在移动端断点下计算出小于16px的实际值
    }
  }}
  {/* 其余组件属性 */}
/>

全项目修复可直接在MUI自定义主题中覆写MuiInputBase的默认样式，无需每个组件单独配置。

• 全局事件拦截兜底，覆盖所有浏览器默认缩放行为
  如果前两步配置后仍存在偶发缩放，在项目入口文件（React的main.jsx/Vue的main.js等）添加以下事件监听，彻底阻断缩放触发路径：

// 禁用双指捏合缩放
document.addEventListener('touchmove', (e) => {
  if (e.touches.length > 1) e.preventDefault();
}, { passive: false });

// 禁用双击缩放、点击输入框时的意外缩放触发
let lastTouchEndTime = 0;
document.addEventListener('touchend', (e) => {
  const currentTime = Date.now();
  if (currentTime - lastTouchEndTime <= 300) e.preventDefault();
  lastTouchEndTime = currentTime;
}, { passive: false });

注意：事件监听的passive参数必须设置为false，否则Chrome等现代浏览器会直接忽略preventDefault()调用，导致拦截失效。

• 排查全局样式冲突
  检查项目全局样式，移除以下会触发异常缩放的配置：
  • 给html/body标签设置了值不等于1的zoom属性
  • 给输入框的父级容器设置了transform: scale()类缩放属性
  • 全局CSS重置规则将输入框默认字体大小修改到16px以下

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