WebView中软键盘弹出时页面不顶起怎么办
Android WebView默认不会自动顶起页面内容,导致input聚焦后软键盘遮挡输入框。这不是HTML5的问题,而是WebView的渲染策略决定的——它把整个页面当做一个静态视口,键盘只是系统层浮层。
- 在
AndroidManifest.xml中对应Activity添加:android:windowSoftInputMode="adjustResize"(不是adjustPan) - 确保根布局是
LinearLayout或RelativeLayout等支持重绘的容器,避免用FrameLayout套全屏WebView却不设layout_height="match_parent" - Web页面内不要给
body或html设height: 100vh,这会锁死视口高度,导致resize失效;改用min-height: 100vh
iOS WKWebView滚动定位异常与focus后空白问题
iOS的WKWebView对focus事件响应更激进,常出现输入框被顶出可视区、甚至页面“上移留白”——本质是WKWebView在键盘弹出时强行滚动到input位置,但未考虑安全区或fixed元素偏移。
- 监听
focus事件后手动调用element.scrollIntoView({ behavior: 'smooth', block: 'center' }),避免依赖默认滚动 - 在
input外层加一层div并设position: relative,防止position: fixed的header/footer被键盘拉扯错位 - 务必在
viewportmeta中加入viewport-fit=cover,否则iOS 15+可能忽略安全区计算,导致底部输入框被遮挡
Cordova/ Capacitor插件配置影响键盘行为
使用Cordova或Capacitor打包时,键盘插件本身会接管原生行为,若版本不匹配或配置冲突,反而加剧遮挡问题。