uniapp 键盘弹出导致页面宽度变小如何解决？

在uniapp开发中，当键盘弹出时页面宽度会突然变小，导致布局错乱。这个问题在安卓和iOS设备上都会出现，尤其是fixed定位的元素会被挤压变形。请问有什么方法可以保持页面宽度不变，或者优雅地处理键盘弹起时的布局问题？

2 回复

在 pages.json 中配置当前页面的 style：

"style": {
  "app-plus": {
    "softinputMode": "adjustResize"
  }
}

或使用 CSS 固定布局，避免使用百分比宽度。


在 UniApp 中，键盘弹出时页面宽度变小通常是由于键盘挤压页面布局导致的。以下是几种解决方案：

1. 使用 position: fixed 布局

将页面内容容器设置为固定定位，避免键盘影响布局。

.container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

2. 动态调整布局

监听键盘高度变化，动态调整页面布局。

onShow() {
  uni.onKeyboardHeightChange(res => {
    this.keyboardHeight = res.height;
    // 根据键盘高度调整页面布局
  });
}

3. 使用 input 组件的 adjust-position 属性

将 adjust-position 设置为 false，禁止页面自动调整。

<input adjust-position="false" />

4. 通过 CSS 视口单位

使用 vh 单位设置高度，避免键盘影响。

.content {
  height: 100vh;
  overflow-y: auto;
}

5. 页面滚动到输入框位置

使用 uni.pageScrollTo 将页面滚动到输入框位置。

onFocus() {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 0
  });
}

建议：

  • 优先使用 adjust-position="false" 结合 position: fixed 布局。
  • 测试不同平台的兼容性（iOS 和 Android 表现可能不同）。

以上方法可有效避免键盘弹出导致的页面宽度变化问题。

回到顶部