移动端弹窗键盘适配应放弃绝对定位偏移，改用 fixed 锚定+transform 微调，监听 visualViewport resize 实时感知键盘，结合防抖与安全区校验确保位置准确。

移动端弹窗在键盘弹出/收起时位置错乱，本质是浏览器触发了 resize 但未重置弹窗的绝对定位坐标。仅靠监听 resize 并用 transform 平移，容易因滚动、缩放、输入框聚焦偏移等导致计算偏差。更稳妥的做法是：**避免依赖绝对定位偏移，改用动态锚定 + transform 微调，结合防抖和视口安全区校验**。

别直接改 top/left，优先用 transform 移动

用 top/left 动态设置会触发回流，且易被父容器 overflow: hidden 或 transform 上下文截断。推荐统一用 transform: translateY() 控制垂直偏移：

• 初始弹窗设为 position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)
• 键盘弹出后，只更新 transform: translate(-50%, calc(-50% - Xpx))，X 是键盘高度（从 visualViewport.height 或 window.innerHeight 差值估算）
• 这样不破坏定位上下文，也不受父级 transform 影响

用 visualViewport API 替代 window.resize

window.resize 在 iOS Safari 中常延迟或漏触发，尤其软键盘收起时。改用 visualViewport 可实时响应视觉视口变化：

• 监听 visualViewport.addEventListener('resize', handler)
• 通过 visualViewport.height 和 window.innerHeight 的差值判断键盘是否打开（差值 > 150px 通常为键盘）
• 注意 Android Chrome 需兼容 innerHeight + scrollY 组合判断

锚定目标元素，而非固定屏幕坐标

如果弹窗需对齐某个输入框（如“选择地址”弹窗），不要算屏幕坐标再偏移，而是：

• 用 element.getBoundingClientRect() 获取目标元素在视口中的位置
• 弹窗 position: fixed，top 设为 rect.bottom + gap，left 设为 rect.left
• 配合 transform: translateX() 水平居中弹窗本身，避免因目标过窄导致错位
• 键盘弹出后，重新获取 rect —— 它已随页面滚动/缩放自动更新

加防抖 + 安全区兜底

键盘频繁切换时 resize 事件密集，需防抖（300ms）；同时 fallback 到安全区检查：

• 用 @media (prefers-reduced-motion) 或 matchMedia('(max-height: 600px)') 做粗略适配
• 检测 document.documentElement.scrollHeight 是否突增（说明内容被顶起）
• 最终位置强制限制在 safe-area-inset-bottom 之上，避免被键盘遮挡

基本上就这些。核心是放弃“算一次坐标一劳永逸”的思路，转向“锚定 + 实时视口感知 + transform 微调”。不复杂但容易忽略 visualViewport 和安全区。