ios微信webview中fixed元素被键盘顶飞，需用absolute+focusin/blur+容器约束解决：根容器设relative和min-height:100vh，focusin后settimeout取坐标计算bottom值，blur时恢复fixed并scrollto归位。
iOS 微信浏览器里 position: fixed 元素被键盘顶飞，不是你 CSS 写错了，而是微信 WebView（基于旧版 Safari 内核）压根不响应键盘弹出事件，fixed 仍按原始视口高度计算位置——结果就是底部按钮飘在半空、遮不住输入框、甚至消失。纯 CSS 无解，必须用 position: absolute + focusin/ blur + 容器约束三者联动。
为什么 iOS 微信里 resize 监听完全不可靠
iOS 微信 WebView 的 window.onresize 触发率低于 20%，且常延迟 300ms 以上。等事件触发时，键盘早已弹出、UI 已错乱。它不把键盘当作视口变化，所以 resize 根本不发。别把它当主逻辑，只可作为横屏切换的辅助兜底。
-
focusin是唯一稳定入口：用户点 input 的瞬间就触发，冒泡、兼容 iOS 12+ 所有微信版本 - 必须监听所有可聚焦元素：
input、textarea、[contenteditable]，漏掉textarea就等于漏掉一半场景 - 别用
focus：不冒泡，子元素聚焦时监听不到
absolute 模拟 fixed 必须满足的三个硬条件
只写 position: absolute; bottom: 0 会穿帮——因为父容器一塌，元素照样飘走。真正起效要同时满足：
公众号运营：文章发布至草稿、样式封面、评论与用户管理、数据统计等。用户要求将 Markdown 发送到公众号草稿、查看阅读量统计或类似后台操作时，使用本技能。
- 根容器（如
#app或body）设position: relative和min-height: 100vh（不能只写height: 100vh，否则键盘弹出时高度坍缩） - 底部区域加
width: 100%，否则横屏或缩放后左右偏移 -
body { overflow: hidden; }或touch-action: manipulation，禁用 body 滚动，避免滚动干扰定位锚点
focusin 后如何安全算 bottom 值
不能直接读 input.getBoundingClientRect().bottom —— focusin 触发时 DOM 还没重排，坐标是键盘弹出前的旧值。也不能用 offsetTop，它在 relative 容器下不可靠。
- 必须加
setTimeout(() => { ... }, 0)，让浏览器完成重排后再取坐标 - bottom 值公式是
window.innerHeight - inputRect.bottom，不是写死数值，也不是inputRect.height - 计算前先确认
document.activeElement === inputEl，防止异步焦点转移导致状态错位 - 若页面用了
transform、overflow: hidden或fixed父容器，getBoundingClientRect()可能返回错误坐标，且无报错提示
blur 后必须立刻清除内联样式并恢复 fixed
失焦后不处理，滚动时元素会彻底错位、“粘”在段落上，甚至消失。
- 在
blur回调里立刻执行：el.style.removeProperty('bottom')和el.style.removeProperty('top') - 再恢复
el.style.position = 'fixed'和el.style.bottom = '0' - iOS 微信中收起键盘后常卡在高位，建议加
setTimeout(() => { window.scrollTo(0, 0); }, 100)强制归位
最容易被忽略的是：所有计算都依赖 document.activeElement 的实时性，而微信 WebView 中焦点转移可能异步滞后；一旦状态不同步，整个定位逻辑就崩了。别指望一次写对，真机测至少覆盖 iOS 15.3–17.6 + 微信 8.0.40–8.0.52。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
