uni-app H5在Android下input聚焦时底部被顶起，根本原因是Android浏览器软键盘弹出导致viewport缩放且resize事件不可靠；应优先监听visualViewport.height变化，fallback使用window.innerHeight+setTimeout检测。
uni-app H5 在 Android 下 input 聚焦时底部被顶起，根本原因是 viewport 缩放和 resize 事件不可靠
Android 浏览器（尤其微信内置浏览器、QQ 浏览器）在软键盘弹出时，会强制缩小 viewport 宽度、拉伸高度，导致 window.innerHeight 突然变小，但 resize 事件不触发或延迟严重，fixed 元素直接被“顶上去”。iOS 相对稳定，所以问题集中在 Android。
监听 window.visualViewport 可靠性高于 window.resize
Chrome 82+（Android 大部分主流 WebView 已支持）提供了 visualViewport API，它能实时反映可视区域变化，比 window.innerHeight 和 resize 更精准。软键盘弹起时，visualViewport.height 会明显下降，收起后恢复。
-
visualViewport不受页面缩放干扰，且在键盘弹出瞬间就更新 - 必须在
onLoad后注册监听，避免生命周期错位 - 需兼容 fallback：若
visualViewport不存在（如旧版 UC），退回到window.innerHeight+setTimeout检测
示例关键逻辑：
onLoad(() => {
if ('visualViewport' in window) {
const handleResize = () => {
const h = window.visualViewport?.height || window.innerHeight;
// 判断是否键盘弹起：当前高度比初始高度小约 200px+
if (h < defaultHeight - 150) {
uni.$emit('keyboardUp', { height: defaultHeight - h });
} else {
uni.$emit('keyboardDown');
}
};
window.visualViewport.addEventListener('resize', handleResize);
}
});用 CSS 变量 + 动态 bottom 控制底部区域显隐
不要依赖 position: fixed + bottom: 0 硬撑，而应通过 CSS 变量注入键盘高度，让底部容器响应式收缩或隐藏。
- 在
<view class="bottom-bar">上绑定:style="{ 'bottom': keyboardHeight + 'px' }" - 或更推荐：设为
display: none（当isKeyboardUp为 true 时），避免 Android 下 fixed 元素被错误重绘 - H5 端慎用
@media (min-aspect-ratio: 13/20)—— 这个规则在部分 Android 浏览器中失效，且无法区分键盘是否真弹出
注意：CSS 中的 bottom 值必须带单位（如 '120px'），传 120 数字会被忽略。
pages.json 的 softinputMode 对 H5 无效，别白配
softinputMode 是 app-plus（即原生 App）平台专属配置，在 H5 环境下完全不生效。很多开发者误以为在 pages.json 里加了 "softinputMode": "adjustResize" 就能解决 H5 键盘问题，结果毫无作用。
- H5 端所有软键盘行为均由浏览器自身控制，uni-app 无权干预
- 该字段只影响
uni-app打包成 App 后的原生键盘行为 - 若你在 H5 页面看到配置生效，那只是巧合（比如页面恰好用了 scroll-view + adjust-position=false 的组合）
真正要改的，是 JS 层对 visualViewport 或 window.innerHeight 的监听逻辑，以及对应 DOM 的显隐或定位调整。
实际项目中最容易被忽略的一点：键盘收起后 visualViewport.height 恢复有 100–300ms 延迟，直接设 bottom: 0 会导致闪动。建议加 requestAnimationFrame 或 16ms 微延迟再应用还原值。
