React中如何在input聚焦放大页面后，于表单提交时触发页面缩小

直接通过动态修改viewport元标签的属性实现提交后缩小页面，同时不会禁用原有输入框自动放大效果，完整实现代码如下：

const Component = (props) =>{
  // 存储原始viewport配置，避免破坏原有缩放逻辑
  const getOriginalViewport = () => {
    const viewport = document.querySelector('meta[name="viewport"]');
    return viewport ? viewport.content : 'width=device-width, initial-scale=1';
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    const originalViewportContent = getOriginalViewport();
    const viewport = document.querySelector('meta[name="viewport"]') || document.createElement('meta');
    if (!viewport.hasAttribute('name')) {
      viewport.setAttribute('name', 'viewport');
      document.head.appendChild(viewport);
    }

    // 临时设置viewport强制重置缩放
    viewport.setAttribute('content', `${originalViewportContent}, maximum-scale=1`);
    
    // 延迟恢复原始viewport配置，保证缩放生效后仍支持后续自动放大
    setTimeout(() => {
      viewport.setAttribute('content', originalViewportContent);
    }, 100);

    // 其余表单提交逻辑
  }

  return(
    <form onSubmit={handleSubmit}>
      <input/>
      <button>Sign in</button>
    </form>
  );
}

• 该方案仅会在表单提交时触发一次页面缩放重置，平时输入框聚焦的自动放大效果完全保留，符合需求
• 代码中100ms的延迟可根据实际设备表现调整，保证浏览器完成缩放动作后再恢复viewport配置即可
• 如果你的页面原有viewport已经配置了其他参数，代码会自动继承原有配置，不需要手动修改

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