移动端input聚焦时软键盘弹出导致fixed按钮被顶出视口，根本原因是浏览器重定义可视区域；应优先用visualViewport API监听高度变化并动态调整按钮位置，fallback方案包括dvh单位和scrollIntoView，微信等Webview需用focus/blur+定时器探测。
input聚焦时页面被顶起，按钮消失在视口外
移动端浏览器（尤其是iOS Safari）在<input>获得焦点、软键盘弹出时，会缩放或重排视口，导致position: fixed的底部按钮被顶出屏幕——这不是CSS失效，而是浏览器对“可视区域”的重新定义。iOS下visualViewport高度变化，而window.innerHeight可能未及时更新，造成定位错位。
- 别依赖
vh单位做固定定位：键盘弹出后100vh仍按原始屏幕高度计算，不是当前可见高度 - 避免纯
position: fixed; bottom: 0：它锚定在“布局视口”底边，而非用户实际看到的底部 - Android Chrome相对友好，但部分版本（如旧版WebView）也会出现类似问题
用visualViewport监听键盘高度变化
iOS Safari支持visualViewport API，它能真实反映当前用户可见区域尺寸。键盘弹出时，visualViewport.height会明显减小，差值近似键盘高度。这是目前最可靠的手动响应方式。
- 监听
visualViewport.addEventListener('resize', handler)，而非window.resize - 首次进入页面时，先记录
visualViewport.height作为“无键盘基准值” - 在
resize回调里，用基准值减去当前visualViewport.height，得到键盘估算高度 - 将该高度赋给按钮容器的
margin-bottom或通过transform: translateY()上推
const baseHeight = visualViewport.height;
visualViewport.addEventListener('resize', () => {
const kbHeight = baseHeight - visualViewport.height;
document.querySelector('.submit-btn').style.transform = `translateY(${kbHeight}px)`;
});CSS fallback：viewport单位 + scrollIntoView兜底
当visualViewport不可用（如老版Android或微信内置浏览器），需降级处理。单纯用vh不行，但结合min-height和滚动控制可缓解问题。
- 给按钮父容器设
min-height: 100dvh（dvh是动态视口单位，Safari 16.4+、Chrome 105+支持） - 在
input的focus事件中调用button.scrollIntoView({ behavior: 'smooth', block: 'nearest' }) - 避免
scrollIntoView({ block: 'end' })：键盘已弹出时，它可能触发意外滚动或白屏 - 慎用
scroll-behavior: smooth全局设置，某些安卓机型会卡顿
微信/钉钉等Webview里的特殊处理
这些环境常禁用visualViewport，且resize事件不触发。更稳妥的做法是监听focusin和blur，配合定时器探测视口变化。
立即学习“前端免费学习笔记（深入）”；
- 在
focusin时启动一个setTimeout（延迟300ms），读取window.innerHeight并与初始值比对 - 若差值 > 150px，大概率是键盘弹出，立即调整按钮位置
-
blur时清除定时器，并恢复原始样式 - 不要依赖
orientationchange：横竖屏切换与键盘无关，且触发时机不可控
真正麻烦的不是怎么写，而是不同机型、系统版本、Webview内核对“键盘弹出”的响应粒度完全不同——iOS 17的Safari和iOS 15的微信，同一段visualViewport代码行为可能相反。得留好降级路径，别指望一套CSS通吃。
