Cordova键盘弹出后顶部导航栏上移无法复位问题求助

DevOps 小满

2026-7-2

给你几个实测有效的解决思路，不用纠结那个废弃插件：

修改Cordova配置文件
在config.xml里添加以下配置，直接禁用键盘对页面的缩放/移位：
```
<preference name="KeyboardResize" value="false" />
<preference name="KeyboardResizeMode" value="native" />
<preference name="KeyboardShrinksView" value="false" />
```
这是最直接的方法，从底层阻止WebView因键盘弹出调整布局。
换用Sticky定位替代Absolute/Fixed
放弃原来的absolute或fixed定位，改用CSS的sticky，同时锁定页面根容器高度：
```
body, html {
  height: 100%;
  overflow: hidden;
}
.navbar {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: #fff; /* 避免下方内容透上来 */
}
```
Sticky定位会牢牢固定在顶部，不受键盘弹出的布局波动影响。

用维护中的键盘插件监听事件修正
用当前还在维护的cordova-plugin-ionic-keyboard替代旧插件，监听键盘显隐事件强制重置Navbar位置：
先安装插件：

cordova plugin add cordova-plugin-ionic-keyboard

然后添加事件监听：

document.addEventListener('keyboardWillShow', () => {
  document.querySelector('.navbar').style.top = '0';
});
document.addEventListener('keyboardWillHide', () => {
  document.querySelector('.navbar').style.top = '0';
});

不管键盘怎么动，强制把Navbar拉回顶部。

修正视口Meta标签
确保index.html的视口配置正确，避免视口偏移：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no">
```
viewport-fit=cover能让页面填满整个视口，减少键盘弹出时的布局错乱。