iPhone端react-select下拉框左偏错位问题求助

问题根源 #

iOS Safari 焦点切换后会出现 viewport 计算异常，再加上 menuPortal 挂载到 body 时的定位逻辑冲突，导致下拉框无法与输入框对齐。

具体修复方案 #

1. 修正媒体查询语法错误

原代码中媒体查询存在语法错误（and 后缺少空格），导致移动端定位样式不生效，修改如下：

// 原错误写法
'@media only screen and(max-width: 768px)'
// 修正后
'@media only screen and (max-width: 768px)'

2. 重构 menu 与 menuPortal 的定位逻辑

通过组件 ref 获取输入框的实时位置，强制下拉框与输入框对齐，替换原 menuPortal 和 menu 的样式定义：

// 先在组件内创建ref
const selectRef = useRef(null);

const colorStyles = {
  // ... 其他原有样式
  menuPortal: (base) => ({
    ...base,
    zIndex: 999,
    position: 'fixed',
    top: 0,
    left: 0,
    pointerEvents: 'none',
  }),
  menu: (provided, state) => {
    const controlRect = selectRef.current?.getBoundingClientRect();
    return {
      ...provided,
      position: 'absolute',
      top: controlRect ? `${controlRect.bottom}px` : provided.top,
      left: controlRect ? `${controlRect.left}px` : provided.left,
      width: controlRect ? `${controlRect.width}px` : '100%',
      pointerEvents: 'auto',
      '@media(max-width:767.98px)': {
        width: controlRect ? `${controlRect.width}px` : '280px',
      },
    };
  },
};

3. 给 Select 组件绑定 ref

将创建的 ref 传递给 Select 的 selectRef 属性：

<Select
  selectRef={selectRef}
  // ... 其他原有属性
/>

4. 禁用 iOS Safari 自动缩放

在 HTML 头部添加 meta 标签，避免焦点切换导致 viewport 缩放干扰定位计算：

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

修复原理 #

• 修正语法错误确保移动端样式正常生效；
• 通过组件实时位置计算，强制下拉框与输入框的坐标对齐，解决 menuPortal 挂载到 body 时的定位偏移；
• 禁用自动缩放避免 iOS 焦点切换时 viewport 变化引发的定位计算错误。

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