旧版iOS Safari输入框聚焦时视口被压缩且visualViewport不生效，需用focusin监听+scrollIntoView避让、动态维护可用视口高度、结合env(safe-area-inset-bottom)留底安全区。
iOS Safari 输入框聚焦时视口被压缩，visualViewport 不生效怎么办
旧版 iOS（15.4 之前）Safari 在软键盘弹出时会错误地触发 resize 事件，并把 window.innerHeight 缩小为「可见区域高度」，但又不更新 visualViewport.height，导致依赖视口高度的定位逻辑（比如浮层、下拉菜单、滚动锚定）直接错位或被遮挡。
这不是 CSS 能单独解决的问题——CSS 的 position: fixed 和 vh 单位在键盘弹出后仍按错误的 innerHeight 计算，必须用 JS 动态干预。
- 只监听
resize不够：iOS 键盘收起时也可能不触发，或触发两次 - 不要依赖
document.documentElement.clientHeight：它和innerHeight一样被污染 - 优先使用
visualViewport.height，但需降级兜底：iOS 15.4+ 支持良好，旧版返回0或不触发visualViewport.addEventListener('resize', ...)
用 focusin + scrollIntoView 主动避让输入框
比起等视口变化再调整，更可靠的方式是在输入框获得焦点的瞬间，确保它在可视区中部。尤其对页面底部的 <input>，默认可能被键盘完全盖住。
- 监听
focusin（不是focus），捕获所有聚焦来源（包括点击、tap、语音输入） - 调用
element.scrollIntoView({ block: 'center', behavior: 'smooth' })，iOS Safari 支持该参数 - 加
setTimeout(..., 0)延迟执行：避免在键盘尚未开始动画时调用，导致滚动失效 - 仅对
input[type="text"]、textarea、input[type="search"]等可编辑元素生效，跳过button或只读字段
document.addEventListener('focusin', (e) => {
const el = e.target;
if (['INPUT', 'TEXTAREA'].includes(el.tagName) && !el.readOnly) {
setTimeout(() => el.scrollIntoView({ block: 'center', behavior: 'smooth' }), 0);
}
});
动态维护一个可信的「可用视口高度」变量
你需要一个随时能取到的、未被键盘污染的高度值，用于 CSS 变量注入或 JS 布局计算。不能每次都要测，也不能靠猜。
- 初始化时记录
window.innerHeight作为「全屏高度」基准值：const fullHeight = window.innerHeight - 监听
focusin：设isKeyboardOpen = true，并缓存当前scrollY - 监听
blur（配合防抖 300ms）：设isKeyboardOpen = false，恢复滚动位置 - 导出函数
getAvailableHeight()：键盘打开时返回fullHeight * 0.65（经验系数，适配多数键盘高度），关闭时返回fullHeight - 别用
matchMedia('(max-height: 600px)')检测：媒体查询无法响应键盘状态
CSS 配合 JS：用 env(safe-area-inset-bottom) 和 calc() 留出底部安全区
即使 JS 正确计算了高度，底部固定按钮或输入框仍可能被 iOS 底部手势条或键盘遮住。这时要靠 CSS 层面兜底。
- 对底部固定元素（如
.keyboard-fixed-bar），加padding-bottom: env(safe-area-inset-bottom) - 若需精确控制高度（比如输入框距底部 12px），写成：
bottom: calc(12px + env(safe-area-inset-bottom)) - 注意
env()在不支持的浏览器中会失效，需配合@supports (padding-bottom: env(safe-area-inset-bottom))条件应用 - 不要用
viewport-fit=cover强制覆盖安全区：会导致原生手势条不可用，iOS 审核可能拒稿
真正麻烦的不是代码多，而是 iOS 各版本对 visualViewport、resize、focus/blur 的行为不一致——你得同时兼容 12.4、14.8、15.3 这些“经典”版本。测试时务必真机连 Safari Web Inspector，模拟器的键盘行为经常不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
