最常见原因是 viewport 缺少 viewport-fit=cover；需在 head 中声明 meta 标签，固定底部组件加 env()，js 用 scroll 强制重排修复键盘残留，uni-app 推荐用 uni-safe-area。
为什么 env(safe-area-inset-bottom) 在微信里不生效？
最常见原因是 <meta name="viewport" content="..."> 缺少 viewport-fit=cover。微信内置浏览器（iOS版）虽默认启用安全区变量，但若 viewport 声明为 viewport-fit=auto 或完全没写，env(safe-area-inset-bottom) 就会返回 0px，导致底部留白失效。
必须显式声明：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意：该 meta 标签需在 中且早于所有 CSS 加载，否则部分机型（如 iOS 15.4 微信 8.0.42）可能解析延迟。
固定底部元素该加在哪？加错反而双倍留白
不是所有容器都适合加 env(safe-area-inset-bottom)。加错位置会破坏滚动锚点或造成内容上移。
- ✅ 推荐加在
.tabbar、.fab、.toolbar这类绝对/固定定位的底部组件上 - ❌ 禁止加在
body或全页<div class="app"> 上——这会让整个页面内容被顶高，键盘收起后无法自动回弹<li>⚠️ 若组件已有 <code>padding-bottom: 20px，应写成padding-bottom: calc(20px + env(safe-area-inset-bottom))，不能叠加两条padding-bottom - 监听
input的blur事件 - 在回调中执行
window.scrollTo(0, window.scrollY + 1)再立刻window.scrollTo(0, window.scrollY - 1) - 避免直接
scrollTo(0, 0)，否则用户正在看中间内容会被强制拉回顶部
键盘收起后页面卡在半空，怎么用 JS 补救？
iOS 微信（尤其 12.0+）在软键盘收起时，window.innerHeight 不重置，导致视口高度残留“被顶起”状态，底部出现固定空白。CSS 无法响应此动态变化，必须靠 JS 主动干预。
关键不是“滚动到顶部”，而是“触发一次 layout 强制刷新”：
示例代码（轻量无依赖）：
document.addEventListener('blur', e => {
if (e.target.matches('input, textarea')) {
setTimeout(() => {
const y = window.scrollY;
window.scrollTo(0, y + 1);
window.scrollTo(0, y);
}, 50);
}
}, true);
uni-app 或 Vue 项目里要注意什么？
uni-app 的原生 tabbar 已内置安全区适配，但自定义 tabbar 组件仍需手动处理；Vue 项目则需额外防抖滚动修复逻辑。
- uni-app 中优先用
<uni-safe-area></uni-safe-area>包裹底部区域，比纯 CSS 更稳定（它会在 iOS 下自动注入env()并 fallback 到 constant） - Vue 3 的
onMounted钩子中注册 blur 监听时，记得用onBeforeUnmount清理，否则路由切换后事件残留 - 微信小程序中可直接用
env(safe-area-inset-bottom)，无需 meta，但 rpx 单位要和 env 混用时写成calc(20rpx + env(safe-area-inset-bottom))，不能省略单位
真正容易被忽略的是：真机调试时 Safari 开发者工具的 “Show rulers” 必须打开，模拟器不反映真实安全区边界；而微信开发者工具对 env() 的支持有延迟，首次加载可能取不到值，需要加一层 @supports (padding-bottom: env(safe-area-inset-bottom)) 条件判断。
