uni-app ios手机打开webview页面时 键盘模式adjustResize下 弹出键盘前后webview top值表现不一致

在使用 uni-app 开发 iOS 应用时，如果你在 WebView 页面中使用了 adjustResize 键盘模式，可能会遇到键盘弹出前后 WebView 的 top 值表现不一致的问题。这是因为 iOS 在处理键盘弹出时，对 WebView 的布局调整方式与 Android 不同。

问题描述

在 iOS 上，当键盘弹出时，系统会自动调整 WebView 的高度，以避免键盘遮挡输入框。然而，这种调整可能会导致 WebView 的 top 值发生变化，从而影响页面的布局。

解决方案

以下是一些可能的解决方案：

1. 使用 adjustPan 模式

如果你不需要 adjustResize 模式，可以尝试使用 adjustPan 模式。adjustPan 模式不会调整 WebView 的高度，而是通过滚动页面来避免键盘遮挡输入框。

uni.setKeyboardAdjustMode({
  mode: 'adjustPan'
});

2. 手动调整布局

如果你必须使用 adjustResize 模式，可以监听键盘的弹出和收起事件，手动调整页面的布局。

uni.onKeyboardHeightChange(res => {
  const keyboardHeight = res.height;
  if (keyboardHeight > 0) {
    // 键盘弹出时，手动调整布局
    // 例如：设置 WebView 的 top 值
  } else {
    // 键盘收起时，恢复布局
  }
});

3. 使用 CSS 调整布局

你可以通过 CSS 来调整页面的布局，以避免键盘弹出时布局错乱。例如，使用 position: fixed 或 flex 布局来确保页面元素在键盘弹出时仍然保持正确的位置。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.content {
  flex: 1;
  overflow-y: auto;
}

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

4. 使用 scrollIntoView 方法

在输入框获得焦点时，使用 scrollIntoView 方法将输入框滚动到可视区域。

const inputElement = document.getElementById('input');
inputElement.scrollIntoView({ behavior: 'smooth', block: 'center' });