iphone全面屏tabbar需用position:fixed+bottom:env(safe-area-inset-bottom)+bottom:0确保吸底不被遮挡，同时主体内容区须同步设置padding-bottom:env(safe-area-inset-bottom)避免文字被截。
TabBar吸底需要避开iPhone X+的安全区域
直接用 position: fixed; bottom: 0; 在 iPhone X、XS、12/13/14/15 全面屏上会导致 TabBar 被底部圆角或Home指示器遮挡，实际可点击区域变小甚至失效。关键不是“贴到底”，而是“贴到安全区域的底部边界”。
必须依赖 CSS 环境变量 env(safe-area-inset-bottom)，它在支持全面屏的 iOS Safari 和部分安卓 WebView（如微信内置浏览器）中返回底部安全区高度（例如 34px），不支持时该值为 0，天然降级。
常见错误是只加 padding-bottom 或只改 bottom，二者逻辑不同：前者撑开容器留白，后者控制定位基准线——TabBar 场景应优先用 bottom 控制定位，避免内容区被意外拉高。
正确写法：fixed + bottom + env() 组合
核心样式必须同时满足三个条件：固定定位、动态 bottom 值、兜底 fallback。不能只靠 padding-bottom 撑开，否则 TabBar 本身仍会沉入安全区下方。
-
position: fixed;是前提，确保脱离文档流且不随滚动偏移 -
bottom: env(safe-area-inset-bottom);把定位基准线从屏幕底边移到安全区底边 -
bottom: 0;必须紧跟其后作为不支持env()的降级（CSS 会忽略非法值并采用下一个有效声明） - 容器高度需显式设置（如
height: 50px;），否则bottom位移可能不生效
示例：
.tabbar {
position: fixed;
left: 0;
right: 0;
height: 50px;
bottom: env(safe-area-inset-bottom);
bottom: 0;
background: #fff;
border-top: 1px solid #eee;
}
WebView 中 env() 不生效的典型原因
微信、QQ、支付宝等 App 内置 WebView 对 env() 支持不一致：iOS 微信 8.0.23+ 支持，安卓微信长期不支持；部分安卓厂商 WebView（如华为、小米）需开启「Webkit 特性开关」才识别。此时仅靠 CSS 无法解决。
实操建议：
- 服务端或 JS 检测 UA，对已知不支持环境注入 class（如
no-safe-area），再用 CSS 覆盖 - JS 动态读取
window.innerHeight - document.documentElement.clientHeight估算底部留白（仅作 fallback，精度有限） - 不要依赖
@supports (env(safe-area-inset-bottom))，部分 WebView 声称支持但实际不触发重绘 - 真机调试必须用 iOS Safari 或微信 iOS 客户端，Chrome DevTools 的「Device Toolbar」模拟不准确
TabBar 上方内容区要预留安全距离
仅处理 TabBar 不够——如果页面主体内容滚动到底部，最后几行文字仍可能被 TabBar 遮住。需同步给 <main></main> 或滚动容器加内边距。
推荐方案是统一用 padding-bottom，与 TabBar 的 bottom 解耦：
main {
padding-bottom: env(safe-area-inset-bottom);
padding-bottom: 0;
}
注意：此处用 padding-bottom 而非 margin-bottom，避免外边距合并导致失效；若主内容区是 overflow-y: auto 的独立容器，则必须对该容器设 padding-bottom，而不是父级。
复杂点在于，有些项目用 Vue Router 的 <router-view></router-view> 直接渲染页面组件，此时 padding 需加在每个页面组件根元素上，或通过全局布局组件统一注入——容易漏掉，上线后才发现底部文字被截。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
