需在viewport中声明viewport-fit=cover并给TabBar父容器设置padding-bottom: env(safe-area-inset-bottom)实现自适应留白，避免被Home Indicator遮挡。
TabBar安全区在iOS设备上被遮挡怎么办
iPhone X及后续全面屏机型底部有物理不可操作区域（Home Indicator），如果TabBar紧贴屏幕底边，用户滑动时会误触或视觉上被遮挡。CSS本身不提供“TabBar专用安全区”，但可通过env()函数读取系统定义的安全区变量来动态留白。
关键不是“撑开TabBar”，而是让TabBar的父容器底部留出足够空间，避免内容被裁切或交互失灵。
-
env(safe-area-inset-bottom)是iOS Safari和部分安卓WebView支持的环境变量，返回底部安全区高度（如34px） - 必须配合
padding-bottom或margin-bottom使用，不能直接赋给height或bottom - 仅在viewport声明了
viewport-fit=cover时生效，否则env()值为0px
viewport-fit=cover必须显式声明
很多项目漏掉这步，导致env(safe-area-inset-bottom)始终返回0px，TabBar看起来“没反应”。这不是CSS写错了，是浏览器根本没启用安全区计算。
在中确认有：
立即学习“前端免费学习笔记（深入）”；
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover告诉浏览器：允许页面渲染到屏幕边缘，由CSS自行处理安全区 - 若用
viewport-fit=auto（默认值），系统会自动给页面加内边距，你无法控制，且env()不可用 - Android WebView对
viewport-fit支持不一致，建议只在iOS UA下启用该meta（需JS动态注入）
用padding-bottom + env()实现自适应撑开
最稳妥的做法是给TabBar外层容器（比如<footer></footer>或<div class="tabbar-wrapper">）加<code>padding-bottom，而不是改TabBar自身高度或定位。
示例代码：
.tabbar-wrapper {
padding-bottom: env(safe-area-inset-bottom);
/* 回退方案：老设备或不支持env时用固定值 */
padding-bottom: 16px;
padding-bottom: max(16px, env(safe-area-inset-bottom));
}- 不要用
calc(50px + env(safe-area-inset-bottom))——旧版Safari不支持calc里嵌env() - 推荐
max()函数回退（iOS 15.4+、Chrome 102+支持），比@supports更简洁 - 如果TabBar是fixed定位，需确保其父容器有
height: 100vh且overflow: hidden，否则padding可能无效
React/Vue项目中容易忽略的DOM结构问题
框架组件抽象后，常把TabBar直接塞进position: fixed的<div>里，而这个<code><div>没有父级容器接收<code>padding-bottom。结果就是：样式写了，但没地方“撑”。
- 必须保证应用根容器（如
#app）或TabBar直接父元素设置了padding-bottom: env(safe-area-inset-bottom) - Vue Router的
<router-view></router-view>默认不占满视口，需在包裹层加min-height: 100vh - React中若用
createPortal挂载TabBar到body，那它就脱离了正常布局流，env()留白只能靠margin-bottom或bottom偏移，但后者可能被键盘弹起干扰
安全区不是万能胶布，它只提供一个像素值；真正起作用的是你把它用在哪个盒模型层级上。多数失败案例，问题不在env()，而在DOM结构和定位方式没对齐。
