沉浸式状态栏本身不遮挡 input,问题在于安全区未预留、softinputmode 配置错误及 ios fixed 元素双重挤压;需分平台配置 adjustresize、动态 bottom 适配键盘高度,并注意 h5 无 softinputmode。

沉浸式状态栏本身不会直接导致 input 被遮挡,真正出问题的是:状态栏高度被“吃掉”后,页面布局没预留安全区,又叠加键盘弹出时的视口压缩异常——iOS 上尤其明显。
pages.json 的 softinputMode 在沉浸式下必须配对生效
很多开发者以为开了沉浸式("statusBarStyle": "black" 或 "navigationStyle": "custom")就万事大吉,其实不然。在 App 端,softinputMode: "adjustResize" 仍需写在**当前页面的 style 下**,且必须和沉浸式配置共存:
- 不配
softinputMode,安卓键盘一弹,页面不收缩,input直接被盖住;iOS 则可能只做平移,底部按钮消失 - 写了但写错位置(比如塞进
"h5"块或全局"app-plus"),等于没写 - 沉浸式 +
adjustResize组合下,WebView 会先压缩视口高度,再渲染内容——此时若页面用position: fixed包裹底部输入框,它可能被压出可视区,需额外处理
iOS 下 fixed 容器里的 input 会被双重挤压
当 input 放在 position: fixed; bottom: 0 的容器中,且页面启用了沉浸式,iOS 键盘弹出会触发两次干扰:
- 系统自动上推整个 WebView(
adjustResize生效),但 fixed 元素脱离文档流,不随页面缩放,结果是“原地不动”,被键盘顶穿 - 同时,沉浸式让页面顶部贴边,底部 safe-area 又未显式声明,
bottom: 0实际落到屏幕最底,键盘一来毫无缓冲余地 - 解决方案不是去掉 fixed,而是加一层动态兜底:
:style="{ bottom: keyboardHeight ? keyboardHeight + 'px' : 'env(safe-area-inset-bottom)' }" - 注意:不能直接用
env(safe-area-inset-bottom)当键盘高度,它只是刘海/圆角留白,不是键盘高;得靠uni.onKeyboardHeightChange拿真实值
H5 端在 iOS 沉浸式场景根本不用 softinputMode
softinputMode 是 App 平台专属字段,H5 端完全忽略——哪怕你 pages.json 里写了也白搭。iOS Safari 在 H5 中的行为是“硬覆盖”,不压缩视口、不触发 resize、也不发 keyboardHeightChange 事件。此时所谓“沉浸式”只是 CSS 视觉效果,真正的遮挡得靠监听 window.innerHeight 变化:
- 仅当
window.innerHeight缩小 > 100px 时,才判定为键盘弹出(排除横竖屏切换) - 必须加防抖(至少 200ms),否则缩放字体开启时会高频误触发
-
disabled的input在 iOS Safari 下禁止滚动,哪怕内容溢出也锁死——别用它做只读预览,改用textarea readonly或view contenteditable="true" - 给父容器加
overflow-x: auto; -webkit-overflow-scrolling: touch;,否则长文本无法左右滑动
cursor-spacing 和 adjust-position 在沉浸式页面里容易失效
这两个属性只对 App 端原生 input/textarea 生效,但在沉浸式页面中常被忽略,原因很实际:
-
adjust-position="true"必须和softinputMode: "adjustResize"同时存在,缺一不可;单独写等于开关没通电 -
cursor-spacing不是“离顶部距离”,而是“光标到输入框底部的最小间距”,设成20在全面屏上基本无效,建议从100起调 - 如果
input套在scroll-view或 transform 容器里,滚动上下文会被隔离,adjust-position失效——这时只能提级到body层,用绝对定位 +z-index强行托起 - 千万别在
contenteditable元素上用v-model,光标会丢;手动同步要用@input+el.innerText
最易被忽略的一点:安卓和 iOS 对“沉浸式”的实现逻辑完全不同。安卓靠 Activity 的 windowSoftInputMode 控制,iOS 靠 WKWebView 的视口策略,而 uni-app 的封装层无法抹平这种底层差异——所以没有银弹,只有分平台、分容器、分状态的组合判断。











