h5在android上被虚拟按键遮挡是因为window.innerheight不随导航栏变化而更新，需用setinterval轮询并防抖计算安全高度，再通过padding-bottom或transform调整底部元素位置。
为什么H5在Android上会被虚拟按键遮挡
Android原生系统底部的导航栏（返回/主页/最近任务）是系统级UI，H5页面无法直接感知其高度变化。uni-app编译到H5时，页面视口window.innerHeight在虚拟按键弹出/收起时**不会自动更新**，导致你用position: fixed; bottom: 0定位的按钮被直接盖住——这不是uni-app的bug，而是Web标准限制。
H5端监听window.innerHeight变化并防抖
不能依赖resize事件直接赋值，因为Android下该事件触发频繁且无序（比如横竖屏切换、分屏模式、键盘+导航栏同时出现），容易造成按钮反复跳动或错位。
- 只监听
window.innerHeight变化，不监听resize本身：用setInterval每100ms轮询一次，比事件更可靠 - 必须加防抖：连续两次读取差值
才认为是有效变化，排除WebView渲染抖动 - 计算安全高度时，要预留至少
20px余量：实测多数Android机型虚拟按键高度在48–64px之间，但部分定制ROM（如MIUI、ColorOS）会动态调整 - 别用
env(safe-area-inset-bottom)：它只对iPhone全面屏生效，Android下始终为0
示例逻辑：
Android开发教程与笔记pdf版
下载
Android文件存取与数据库编程知识，文件操作主要是读文件、写文件、读取静态文件等，同时还介绍了创建添加文件内容并保存，打开文件并显示内容；数据库编程方面主要介绍了SQLite数据库的使用、包括创建、删除、打开数据库、非查询SQL操作指令、查询SQL指令-游标Cursors等知识。
data() {
return {
safeBottom: 0
}
},
mounted() {
this.checkHeight = setInterval(() => {
const h = window.innerHeight
if (Math.abs(h - this.lastHeight) > 20) {
this.safeBottom = Math.max(0, window.screen.height - h - 20)
this.lastHeight = h
}
}, 100)
},
beforeUnmount() {
clearInterval(this.checkHeight)
}
给底部按钮加padding-bottom而非bottom定位
用position: fixed + bottom在Android H5上极易失效——WebView布局引擎对fixed元素在视口收缩时的重排支持极差。改用padding-bottom撑开容器底部，让按钮随内容自然上浮。
- 确保父容器是
flex或absolute布局，能响应padding变化 - 不要写
padding-bottom: {{safeBottom}}px，用:style="{ paddingBottom: safeBottom + 'px' }"避免SSR报错 - 如果按钮本身是
fixed，需配合transform: translateY(-${safeBottom}px)微调，否则会出现“悬空”感
避开tabbar和虚拟按键的双重遮挡
H5端--window-bottom只反映tabbar高度（默认50px），对Android虚拟按键完全无效。当两者共存时（比如用户开启“全屏手势”后又呼出导航栏），必须叠加计算。
- 先用
uni.getSystemInfoSync()拿到screenHeight和windowHeight，差值即为所有底部UI总高度 - 再减去已知
tabbar高度（var(--window-bottom)），剩余部分大概率就是虚拟按键 - 最终安全距离 =
Math.max(0, screenHeight - windowHeight - Number(getComputedStyle(document.documentElement).getPropertyValue('--window-bottom').replace('px', '')))
真正难的不是算出这个数，而是每次页面滚动或键盘弹起时，windowHeight可能被WebView错误缓存——所以必须在@focus和@blur钩子中主动触发一次重读。
