uni-app ios页面底部input输入框首次弹出软键盘遮挡问题

这是一个常见的 iOS 软键盘焦点问题，通常是由于页面初次渲染时，WebView 对窗口高度的计算尚未包含软键盘导致的。

核心原因：在 iOS 上，软键盘弹出时，WebView 的窗口（window）高度或视口（viewport）可能不会立即调整，导致 position: fixed 固定在底部的输入框被遮挡。首次触发后，系统可能缓存了正确的布局信息，所以后续操作正常。

针对性解决方案：

1. 使用 uni-app 官方方案：聚焦时滚动页面 这是最推荐的方法。在输入框获得焦点（@focus）时，主动将页面滚动到底部，确保输入框可见。你可以使用 uni.pageScrollTo API。

   // 在 template 中给 input 绑定 focus 事件
   // <input @focus="handleFocus" />
   methods: {
     handleFocus() {
       // 延迟一小段时间确保键盘已弹出，再滚动
       setTimeout(() => {
         uni.pageScrollTo({
           scrollTop: 10000, // 设置一个足够大的值，确保滚动到底部
           duration: 300 // 滚动动画时长，可调整
         });
       }, 100); // 延迟时间可根据实际情况微调，如 100ms
     }
   }
   

2. 检查并调整页面布局结构

   • 确保输入框的父容器没有设置 overflow: hidden 等可能限制滚动的样式。
   • 尝试将输入框放在页面的最末尾，减少复杂布局对计算的影响。

3. 针对 iOS 的 CSS 调整（可能有效） 在 App.vue 或页面样式中，尝试添加以下 CSS，以改善 iOS 对固定定位元素的处理：

   /* 使页面支持弹性滚动，可能有助于键盘处理 */
   page {
     -webkit-overflow-scrolling: touch;
     overflow: auto;
   }