ios中focus时scrollintoview失效是因软键盘动画期间滚动被冻结，需加300ms延迟并设block:'nearest'；android webview的resize不可靠，应由原生层检测键盘高度并注入js；env(safe-area-inset-bottom)与键盘无关，不可用于适配。
focus 事件中调用 scrollIntoView 为什么 iOS 失效
不是 scrollIntoView 本身不支持，而是 iOS Safari 和多数 WebView 在软键盘弹出动画期间会冻结或延迟滚动行为。直接在 focus 回调里调用，常因时机太早（键盘尚未完全展开）或被系统滚动抢占导致无效。
关键干预点是加延迟 + 明确滚动方向：
-
setTimeout(() => el.scrollIntoView({ block: 'nearest', inline: 'start' }), 300)—— 300ms 是实测较稳的下限，低于 200ms 容易失败 - 必须用
{ block: 'nearest' }，iOS 对'end'或'center'支持差，且容易滚过头 - 若输入框在
position: fixed容器内，scrollIntoView可能找不到有效滚动上下文，需确保其父级有overflow: auto或滚动由document.body承担
Android WebView 中监听 resize 判断键盘状态不可靠
Android 原生 WebView 在软键盘弹出时确实会触发 resize，但仅当 android:windowSoftInputMode="adjustResize" 生效时才稳定；而很多 hybrid 容器（如微信、钉钉、部分厂商定制 WebView）会强制覆盖该配置，导致 resize 根本不触发，或只在收起键盘时触发一次。
更稳的做法是结合原生层传参：
- 原生 Android 用
ViewTreeObserver.OnGlobalLayoutListener检测getWindowVisibleDisplayFrame高度变化，算出键盘高度后通过evaluateJavascript注入 JS 变量（如window.__KEYBOARD_HEIGHT = 250） - 前端 JS 不依赖
resize，而是监听focus后读取该变量，再决定是否滚动、滚动多少 - fallback 方案：若未收到原生高度，退回到
scrollIntoView+ 300ms 延迟，不强求精确像素对齐
env(safe-area-inset-bottom) 不是键盘高度，别拿来垫底
这个 CSS 环境变量只反映设备底部安全区（Home Indicator 或圆角区域），和软键盘完全无关。iOS 上它值恒为 34px（iPhone X 系列）或 0（非刘海屏），Android 上多数 WebView 不支持，即使支持也返回 0。
误用后果明显：
- 写
padding-bottom: env(safe-area-inset-bottom)给底部输入框 —— 键盘弹出时毫无作用，输入框照样被盖住 - 叠加
calc(100vh - env(safe-area-inset-bottom))做容器高度 —— 键盘弹出后视口收缩，100vh仍按原始高度算，内容被截断 - 真正需要的是动态高度信号，不是静态安全区，别让 CSS 干 JS 的活
Hybrid 场景下最简可行路径
不要试图用纯前端方案覆盖所有 hybrid 容器。优先走「原生可控路径」：
- Android：要求原生侧在
onGlobalLayout中计算键盘高度，并通过loadUrl("javascript:handleKeyboardHeight(" + height + ")")或evaluateJavascript主动通知 JS 层 - iOS：WKWebView 可监听
keyboardWillShow/keyboardWillHide，同样注入 JS 回调；若用 UIWebView（已淘汰），则只能依赖focus+scrollIntoView+ 延迟 - JS 层统一处理逻辑：收到高度 > 100px 就执行
el.scrollIntoView({ block: 'nearest' })；否则忽略，避免误触发
复杂点在于原生与 JS 通信时机和降级兜底——很多 hybrid 容器在键盘弹出瞬间会暂停 JS 执行，所以原生侧推送必须带重试或使用同步注入机制（如 Android 的 addJavascriptInterface，iOS 的 WKScriptMessageHandler）。没原生配合的纯 H5 页面，就老老实实用 focus + scrollIntoView + 300ms，别硬套 resize。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
