env()是iOS全面屏布局前提，需viewport-fit=cover触发，@supports检测、calc/max组合使用，且不可在Less/SCSS中预编译，其值随设备状态动态变化。
因为env()是唯一能在运行时读取系统真实安全区尺寸的 CSS 原生机制，其他方案（如UA判断、固定像素、JS计算）都会在折叠屏、横屏、第三方壳、微信WKWebView等场景下失效。
env()不是“可选优化”，而是iOS全面屏的布局前提
iOS 11.2+ Safari 和所有 WKWebView（包括微信、钉钉、企业微信内置浏览器）只在 viewport-fit=cover 模式下注入 env(safe-area-inset-top) 等四个变量；不声明这个 meta，env() 永远返回 0px，刘海和 Home Indicator 就会直接盖住内容。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">缺一不可 - 仅写
initial-scale=1.0不够，viewport-fit=cover才触发系统变量注入 - Chrome DevTools 的 iPhone 模拟器完全不模拟
env()，必须真机 Safari 或微信调试
@supports (padding-top: env(safe-area-inset-top)) 是唯一可靠检测方式
不能靠 navigator.userAgent 判断 iOS 版本——微信、PWA、桌面版 Safari 都可能伪装或行为不一致；也不能用 @supports (-webkit-safe-area-inset-top: 0)，这是已废弃的非标准写法。
- ✅ 正确检测：
@supports (padding-top: env(safe-area-inset-top)) - ❌ 错误写法：
@supports (env(safe-area-inset-top))（语法非法） - fallback 值建议设为
44px（状态栏高度）或20px（视觉呼吸感），别用0
env() 必须和 calc() / max() 组合使用，单独写等于裸奔
padding-bottom: env(safe-area-inset-bottom) 在 Android、旧 iOS、桌面端会整条声明被丢弃，退回到上一个有效值（可能是 0），导致底部按钮被 Home Indicator 遮住。
- 推荐写法：
padding-bottom: max(16px, env(safe-area-inset-bottom)) - 或更稳妥：
padding-bottom: calc(16px + env(safe-area-inset-bottom)) - 不要对
或全局设env()，影响滚动高度和 Flex 布局逻辑 - fixed 元素要用
bottom: calc(env(safe-area-inset-bottom) + 8px)，而不是margin-bottom
Less/SCSS 里不能把 env() 当变量用，否则编译就废了
Less 和 SCSS 是编译时预处理器，不认识 env() —— 它必须原样输出到最终 CSS 中，由浏览器运行时解析。任何试图用 $safe-bottom: env(safe-area-inset-bottom) 或 @bottom: env(...) 的写法，都会让编译结果变成字符串字面量，失去函数调用能力。
- ✅ 正确：
.footer { padding-bottom: env(safe-area-inset-bottom); } - ✅ 计算也得用 CSS 函数：
bottom: calc(env(safe-area-inset-bottom) + 12px); - ❌ 错误：
@bottom: env(safe-area-inset-bottom); margin-bottom: @bottom;（Less 报错或输出无效值）
真正容易被忽略的点是：env() 的值会随横竖屏、多任务侧滑、折叠屏展开动态变化，它不是静态常量。你写的 max(16px, env(...)) 或 calc(12px + env(...))，必须在每次 layout 触发时重新计算——这意味着不能依赖 JS 获取后硬编码进 style，只能靠 CSS 原生机制兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
