必须先加viewport-fit=cover，否则env()恒为0px；需通过真机源码确认meta存在且值正确，禁用DevTools模拟；应使用tailwindcss-safe-area插件提供pb-safe等语义类，并加在主内容容器（如<main>）上，而非body或fixed元素。
必须先加 viewport-fit=cover，否则所有 env() 都是 0px
不是 Tailwind 写错了，而是 iOS Safari 根本没注入安全区变量。只要 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 缺失、拼错（比如写成 viewprot）、或被构建工具（如 Vite 的 html-plugin）覆盖，env(safe-area-inset-bottom) 就永远返回 "0px"。真机调试前务必右键“查看网页源代码”，确认该 meta 存在且值为 cover；DevTools 模拟器完全不支持 env()，测了也白测。
别手动写 pb-[env(safe-area-inset-bottom)]，用 tailwindcss-safe-area 插件
Tailwind 默认不识别 env() 函数，硬写任意值类（如 pb-[env(safe-area-inset-bottom)]）会报错或被忽略。正确路径是引入插件：
- 运行
npm install tailwindcss-safe-area - 在
tailwind.config.js的plugins数组中加入require('tailwindcss-safe-area') - 重启开发服务器（插件需重载配置）
之后就能直接用语义化类名：pb-safe（对应 padding-bottom: 20px; padding-bottom: env(safe-area-inset-bottom)），pt-safe-or-44（等价于 padding-top: max(44px, env(safe-area-inset-top))），不用再手写 fallback 和兼容顺序。
pb-safe 加在哪？不是 <body>，也不是 fixed 元素本身
给 <body> 加 pb-safe 会让整个页面下移，顶部状态栏区域可能错位；给 position: fixed; bottom: 0 的 tabbar 直接加 pb-safe 无效——padding 是内容内部空间，动不了定位元素的位置。
立即学习“前端免费学习笔记（深入）”；
- 推荐加在主内容容器上，比如
<main class="pb-safe">或<div id="app" class="pb-safe"> - 若底部是
fixed导航栏，应确保它自身高度已包含安全距离，或用pb-safe加在它的父容器（如 wrapper）上，让内容“撑开”到安全区上方 - 务必确认该容器启用了
box-sizing: border-box（Tailwind 默认已设），否则padding会让总高度超出预期
横屏、软键盘弹出时 env() 不会更新，CSS 无解
env(safe-area-inset-bottom) 在 iOS 上只响应视口尺寸变化（如旋转），但软键盘弹出时视口高度收缩，env() 值却维持原样——结果就是底部按钮被顶到屏幕中央，留白过大。这不是 Tailwind 或 CSS 的问题，是 iOS Safari 和多数 WebView 的已知限制。
- CSS 层面无法监听键盘事件或动态更新
env()值 - 如需响应键盘，必须用 JS 监听
resize或focusin事件，手动调整容器padding-bottom或切换类名 - 插件
tailwindcss-safe-area也不解决此问题，它只处理静态安全区注入
