uniapp adjustresize 如何解决键盘弹起问题

在uniapp开发中，当键盘弹起时页面布局会被压缩（adjustResize模式），导致底部内容被键盘遮挡或布局错乱。如何解决键盘弹起时的页面适配问题？尝试过配置pages.json的"softinputMode"为"adjustResize"无效，是否有其他兼容方案或替代方案？需要支持Android和iOS双端正常显示。

2 回复

在uniapp中，当键盘弹起时，页面可能被压缩。解决方法：在pages.json中配置对应页面的style，添加"app-plus": {"softinputMode": "adjustPan"}，避免页面被压缩。


在UniApp中，键盘弹起可能导致页面布局被压缩或错位，可通过以下方法解决：

  1. 配置 app.json 中的 softinputMode
    在 app.json 的 "app-plus" 节点下设置键盘模式为 "adjustPan"，避免页面整体被压缩：

    {
  "app-plus": {
    "softinputMode": "adjustPan"
  }
}

  2. 使用 page.json 单独配置页面
    若需对特定页面设置，在页面的 .json 文件中添加：

    {
  "softinputMode": "adjustResize"
}

  3. 动态监听键盘高度（适用于需自定义布局的场景）
    通过 uni.onKeyboardHeightChange 监听键盘高度变化，手动调整页面元素：

    uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height; // 键盘高度（px）
  // 根据 keyboardHeight 调整输入框位置或页面布局
});

  4. CSS 适配
    确保输入框使用 position: fixed 或通过 padding-bottom 预留键盘空间，例如：

    .input-area {
  position: fixed;
  bottom: 0;
  width: 100%;
}

注意事项：

  • adjustPan 会将整个页面上推，适合简单表单；adjustResize 会压缩页面高度，可能引起布局错位。
  • 在部分安卓机型中，需额外测试兼容性，必要时结合 onKeyboardHeightChange 动态调整。

根据需求选择合适方案即可解决键盘弹起问题。

回到顶部