本文介绍在 ios 和 android 原生 webview 场景下，解决软键盘弹出时遮挡输入框的问题，重点提供 android 中通过动态监听视口变化并设置底部 padding 的可靠实现方案，并说明 ios safari 的固有限制与替代建议。
在移动端 Web 开发中，软键盘（Soft Keyboard）弹出导致输入框被遮挡是一个高频且棘手的问题，尤其在混合开发（Hybrid App）中使用 WebView 加载网页时更为突出。iOS Safari 由于系统限制，无法通过 JavaScript 或 CSS 可靠触发页面滚动或重排来避开键盘；而 Android 原生 WebView 虽无官方 API 直接监听键盘状态，但可通过 ViewTreeObserver.OnGlobalLayoutListener 捕获窗口可视区域（getWindowVisibleDisplayFrame）的动态变化，从而间接推断键盘是否展开，并据此调整布局。
以下是在 Android Kotlin 中实现页面内容“上移”效果的核心方案（本质是为 WebView 容器添加动态底部 Padding，腾出键盘高度空间）：
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
// 延迟执行，确保布局已初步完成
Handler(Looper.getMainLooper()).postDelayed({ monitorKeyboardState() }, 500)
}
private fun monitorKeyboardState() {
pActivity?.let { activity ->
val statusBarHeightInPx = dpToPx(activity.statusBarHeight.toFloat())
val toolbarHeight = binding.webViewToolbar.height
binding.webViewMainLayout.viewTreeObserver.addOnGlobalLayoutListener { layoutView ->
val r = Rect()
layoutView.getWindowVisibleDisplayFrame(r)
// 计算键盘高度 ≈ rootView 高度 - 可视区域高度 - 状态栏 - 工具栏
val heightDiff = layoutView.rootView.height - r.height() - statusBarHeightInPx - toolbarHeight
// 若 heightDiff 显著（如 > 200dp），视为键盘已弹出；否则视为收起
val paddingBottom = if (heightDiff > 200) heightDiff.toInt() else 0
// 使用主线程更新 Padding（避免线程异常）
Handler(Looper.getMainLooper()).post {
layoutView.setPadding(0, 0, 0, paddingBottom)
}
}
}
}
private fun dpToPx(dp: Float): Float {
context?.resources?.displayMetrics?.let { metrics ->
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, metrics)
} ?: return dp
}✅ 关键说明与注意事项：
- 延迟初始化：postDelayed(..., 500) 是必要的，可规避 OnGlobalLayoutListener 在布局未完全就绪时误触发；
- 高度阈值判断：heightDiff > 200 用于过滤微小布局抖动（如横竖屏切换、状态栏变化），避免误判键盘状态；
- Padding 替代 Scroll：相比 scrollIntoView() 或 window.scrollTo()，动态 Padding 更稳定，不干扰 WebView 内部滚动逻辑；
- iOS 限制提醒：Safari（包括 WKWebView）不支持任何可靠的键盘显示/隐藏事件监听（resize、focus 等均不可靠），因此推荐前端配合使用 viewport 设置（如 <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">）并启用 scrollIntoView({ behavior: 'smooth', block: 'nearest' }) 作为辅助手段，但需接受其在部分场景下失效；
- 性能优化：OnGlobalLayoutListener 触发频繁，务必在 Fragment/Activity 销毁时移除监听器（示例中未展示，实际使用需调用 viewTreeObserver.removeOnGlobalLayoutListener()）。
综上，Android 方案具备较高实用性与可控性，而 iOS 则需从前端体验设计层面妥协优化（如将关键输入框置于视口中部、缩短表单流程）。开发者应根据目标平台特性选择策略，切勿依赖跨平台通用 JS 方案——原生层干预才是解决该问题的终极路径。
