uni-app中ios软件盘顶起后fixed布局失效

uni-app中ios软件盘顶起后fixed布局失效

示例代码：

<textarea :class="{'textareaTrue':KeyHeight>0,'textareaFalse':KeyHeight<=0}" maxlength="500"  
cursor-spacing="200" :focus="textareaFocus" :value="CommitContent" :adjust-position="false"  
placeholder="$t(textPlacholder) " @keyboardheightchange="keytextboardheightchange"
@input="commitContent" />

操作步骤：

发表评论时点击输入框，获取到软件盘的高度，让输入框fixed定位到软件盘上面一点，输入框不顶起页面

预期结果：

发表评论时点击输入框，获取到软件盘的高度，让输入框fixed定位到软件盘上面一点，输入框不顶起页面

实际结果：

实际结果是
获取到软件盘的高度，也给输入框赋值上去之后，此时上下滑动页面时会发现，输入框会跟着页面上下走，而不是fixed定位到软件盘的上面

bug描述：

场景

发表评论时点击输入框，获取到软件盘的高度，让输入框fixed定位到软件盘上面一点，输入框不顶起页面

信息类型 信息内容
产品分类 uniapp/App
PC开发环境 Windows
PC版本号 window10
HBuilderX 正式
HBuilderX版本 3.2.9
手机系统 Android
手机版本号 Android 10
手机厂商 iPhone
手机机型 iphone x
手机系统 iOS
手机系统版本 14.7.1
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

更多关于uni-app中ios软件盘顶起后fixed布局失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

我补充一下，安卓时没有问题的，就ios有问题

更多关于uni-app中ios软件盘顶起后fixed布局失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个是iOS下fixed定位失效的经典问题。与uni-app无关。建议自行搜索下兼容解决方案。

哦 不~~ 太难了 这道题 太难了~~

这是一个iOS上常见的软键盘与fixed布局的兼容性问题。在iOS中，当软键盘弹出时，浏览器（或Webview）会调整视口（viewport）大小，导致fixed定位的元素参照系发生变化，从而出现“跟随滚动”的现象。

核心原因：iOS软键盘弹出时，视口高度被压缩，fixed定位的基准变为当前可视区域（软键盘上方区域），而非整个屏幕。

解决方案（选其一即可）：

  1. 使用CSS的env(safe-area-inset-bottom)
    在fixed定位的输入框样式中，添加：

    .textareaTrue {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 10px); /* 10px为预留间距 */
  /* 其他样式 */
}

    配合监听keyboardheightchange事件，动态调整bottom值。

  2. 切换为absolute定位
    在软键盘弹出时，将定位改为absolute，并动态计算top值：

    keytextboardheightchange(e) {
  this.KeyHeight = e.detail.height;
  // 通过计算页面滚动高度和可视区域高度，设置top值
}

    .textareaTrue {
  position: absolute;
  top: calc(100vh - 键盘高度 - 元素高度);
}
回到顶部