根本原因是uni-app H5端用div模拟TabBar导致坐标系错位，按钮被压在TabBar上；解决方案是使用--window-bottom变量适配，全面屏需叠加env(safe-area-inset-bottom)。
为什么H5端底部按钮会被挡住
根本原因是uni-app在H5平台用div模拟TabBar，而页面内容区域的坐标系统默认包含整个视口（含TabBar占位），不像App或小程序那样有原生TabBar的“隔离层”。结果就是position: fixed; bottom: 0的按钮，实际渲染位置是屏幕最底边，正好压在模拟TabBar上面——不是z-index问题，是坐标系错位。
用--window-bottom变量直接对齐内容区底部
这是uni-app为H5专门提供的解法，无需条件编译，自动适配默认TabBar高度（通常50px）：
- 给按钮容器加
padding-bottom: var(--window-bottom)，适用于内容流式布局 - 给固定定位按钮加
bottom: var(--window-bottom)，比如悬浮发布按钮：bottom: var(--window-bottom); height: 48px; - 如果按钮本身需要撑开空间（如TabBar上方的工具栏），直接用
height: var(--window-bottom)占位
注意：--window-bottom在App和小程序里值为0，所以这段CSS只在H5生效，多端安全。
遇到自定义TabBar高度时怎么办
如果你在pages.json里改过TabBar样式（比如"height": "60"），--window-bottom不会自动同步。此时必须手动覆盖：
- 在对应页面的
<style>里重写变量：:root { --window-bottom: 60px; } - 或者更稳妥：用
calc(var(--window-bottom) + 10px)微调，避免硬编码 - 别依赖
uni.getSystemInfoSync()算TabBar高度——H5里它返回的是窗口尺寸，跟TabBar无关
iPhone全面屏下按钮被圆角/指示条吃掉
这时候--window-bottom不够用，得叠加安全区域：
- 给按钮加
padding-bottom: env(safe-area-inset-bottom)，iOS Safari和Chrome都支持 - 兼容老版本可写成
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - 如果按钮是
fixed定位，仅靠padding不够，要配合bottom: env(safe-area-inset-bottom) - 千万别同时设
height和padding-bottom——会导致总高度超出预期
真正容易被忽略的是：H5端的env(safe-area-inset-bottom)在非全面屏安卓机上返回0，但某些国产浏览器（如华为、小米）会误报非零值，建议真机测试而非仅靠模拟器。
