NextJS项目iOS设备点击TextField时屏幕缩放问题求助

• 完善viewport参数+保证输入框字体≥16px
  iOS Safari会在输入框字体小于16px时自动触发页面缩放，这是核心诱因之一。先调整viewport标签的完整参数，同时强制输入框字体大小达标：

  1. 更新_app.tsx中的viewport meta：

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

  2. 在globals.css中添加全局输入框样式：

     input[type="text"],
     input[type="email"],
     input[type="password"],
     textarea,
     select {
       font-size: 16px !important;
     }
     

     若使用Material UI等组件库，需针对性覆盖组件样式：

     <TextField
       sx={{
         '& input': { fontSize: '16px' },
       }}
     />
     

• 聚焦时临时调整viewport（兼顾缩放体验）
  若不想完全禁用缩放，可通过脚本在输入框聚焦时临时限制缩放，失焦后恢复：

  import { useEffect } from 'react';
  
  function MyApp({ Component, pageProps }: AppProps) {
    useEffect(() => {
      const handleFocus = () => {
        const viewport = document.querySelector('meta[name="viewport"]');
        viewport?.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
      };
      const handleBlur = () => {
        const viewport = document.querySelector('meta[name="viewport"]');
        viewport?.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=yes');
      };
  
      const inputs = document.querySelectorAll('input, textarea');
      inputs.forEach(el => {
        el.addEventListener('focus', handleFocus);
        el.addEventListener('blur', handleBlur);
      });
  
      return () => {
        inputs.forEach(el => {
          el.removeEventListener('focus', handleFocus);
          el.removeEventListener('blur', handleBlur);
        });
      };
    }, []);
  
    return (
      <>
        <Head>
          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
        </Head>
        <div suppressHydrationWarning id="root">
          {typeof window !== "undefined" ? <Component {...pageProps} /> : null}
        </div>
      </>
    );
  }
  

• 排查第三方样式干扰
  部分UI组件库或自定义样式会偷偷给输入框设置小于16px的字体，可通过Safari开发者工具（连接iOS设备后）查看输入框的computed样式，确认字体大小是否符合要求，针对性覆盖冲突样式。

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