点击输入框时Modal偏移问题：如何阻止自动缩放与位移？

针对你遇到的Modal点击输入框后自动放大、位移的问题，主要是移动端浏览器自动缩放机制和Modal定位逻辑导致的，按以下几点修改即可解决：

1. 禁止浏览器自动缩放 #

移动端浏览器会对字体小于16px的输入框自动放大页面，直接通过Meta标签或CSS禁用该行为：

• 添加Meta标签（放在HTML的<head>里）：

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

• 或者用CSS全局禁用文本缩放：

  html {
    -webkit-text-size-adjust: none; /* 针对Safari */
    text-size-adjust: none;
  }
  

2. 固定Modal的定位逻辑 #

确保Modal使用fixed定位并居中，避免聚焦时页面滚动带动Modal位移：

.modal-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 绝对居中，不受页面滚动影响 */
  width: 90vw;
  max-width: 500px;
  background-color: #fff;
  border-radius: 8px;
  z-index: 1000;
  overflow: hidden; /* 防止内部内容溢出导致滚动 */
}

/* 打开Modal时锁定背景滚动 */
body.modal-open {
  overflow: hidden;
}

3. 输入框设置最小字体 #

把输入框的字体设为16px及以上，从根源避免浏览器触发自动放大：

.modal-input {
  font-size: 16px; /* 关键：避免自动缩放 */
  padding: 12px 16px;
  flex: 1; /* 和发送按钮配合布局 */
  border: 1px solid #eee;
  border-radius: 20px;
}

4. 优化React组件的聚焦逻辑 #

如果还是存在聚焦时的滚动位移，可以手动控制聚焦行为，阻止默认滚动：

import { useRef } from 'react';

function ChatModal() {
  const inputRef = useRef(null);

  const handleInputFocus = (e) => {
    // 阻止默认滚动行为
    e.preventDefault();
    // 手动聚焦输入框
    if (inputRef.current) {
      inputRef.current.focus();
      // 强制保持Modal居中（可选，仅在极端情况使用）
      document.querySelector('.modal-container')?.scrollIntoView({
        behavior: 'instant',
        block: 'center'
      });
    }
  };

  return (
    <div className="modal-container">
      {/* Modal内容区域 */}
      <div className="modal-footer">
        <input
          ref={inputRef}
          onFocus={handleInputFocus}
          className="modal-input"
          placeholder="输入消息..."
        />
        <button className="send-btn">发送</button>
      </div>
    </div>
  );
}

按以上步骤修改后，Modal会保持固定位置，输入框聚焦时也不会触发页面放大或位移。

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