安卓配 softinputMode: "adjustResize" 是起点,但需配合 cursor-spacing 与 adjust-position 成对使用,并注意 pages.json 配置位置、iOS 兼容性及 keyboardHeight 监听防叠加。

安卓端配 softinputMode: "adjustResize" 是最直接有效的起点,但仅靠它不够——iOS 表现不稳定,<web-view></web-view> 完全不认,第三方封装组件(如 u-input)大概率失效。
pages.json 里必须写对位置和值
这个配置只在 App 平台生效,且必须写在**具体页面的 style 下**,不能放在全局 app-plus 或其他层级:
-
"softinputMode"值只能是"adjustResize",不是"adjustPan"——后者只会平移内容,不压缩视图高度,输入框仍可能被顶出可视区 - 没加这句,
uni.onKeyboardHeightChange在安卓上根本不会触发,日志都看不到 - iOS 上即使写了,部分老机型(如 iOS 14.5)或某些输入法(如百度输入法)仍会忽略,需兜底
cursor-spacing + adjust-position 必须成对出现
这两个属性是原生 <input> 和 <textarea></textarea> 的“开关”,但缺一不可:
-
cursor-spacing建议设为80–120,太小推不动,太大导致页面猛跳 -
adjust-position="true"必须显式写出,Android 某些 ROM(MIUI、ColorOS)下默认为false,不写等于没开 - 第三方组件(如
u-input)通常不透传这两个 prop,查文档确认支持,否则换回原生标签 - iOS 上若父容器是
position: fixed,adjust-position效果打折,得配合pageScrollTo手动滚动
监听 keyboardHeight 要防叠加和时机错位
uni.onKeyboardHeightChange 是跨平台兼容性最强的主动控制方式,但容易踩坑:
-
onFocus里注册监听,别在mounted就注册,避免页面未激活时误触发 -
onBlur必须调用uni.offKeyboardHeightChange(),否则多次进页面会叠加监听器,keyboardHeight被反复赋值 - H5 端不触发该事件,得另走
window.addEventListener('resize')+ 高度差判断 - 加底边距不是简单
padding-bottom: keyboardHeight + 'px',要确保父容器能撑开(比如用position: fixed或 flex 布局)
web-view 里的输入框要单独处理
adjust-position 和 cursor-spacing 对 <web-view></web-view> 内部完全无效,因为它是独立浏览器内核:
- 必须在 pages.json 中配
"softinputMode": "adjustResize",否则 web-view 根本收不到键盘高度 -
webview-styles.height不能写死或设为'auto',要用响应式变量绑定,比如:style="{ height: webviewHeight + 'px' }" - 计算新高度公式:
screenHeight - keyboardHeight - statusBarHeight - topOffset - iOS 更新高度后加
nextTick或setTimeout(() => {}, 0),否则样式不生效;收起时建议补一次transform: translateY(0)强制重排
真正难的不是写哪一行代码,而是判断当前遮挡发生在哪个环节:是原生 input 还是封装组件?是在 App 还是 web-view 里?有没有 fixed 定位干扰?这些细节一旦混淆,所有方案都会失效。


















