viewport-fit=cover未添加导致env()不生效，必须在meta标签中同时设置viewport-fit=cover和initial-scale=1.0，且需硬编码于head中；@supports检测须用or连接env()与constant()，padding-bottom是唯一推荐承载属性并需固定值fallback，真机调试才能验证实际效果。
viewport-fit=cover没加，env()就永远不会生效
不生效的首要原因永远是标签漏了viewport-fit=cover。iOS 只有在该模式下才暴露safe-area-inset-top、safe-area-inset-bottom这些变量；缺省或auto会直接禁用安全区上下文，此时env()返回0px不是 bug，而是“没开开关”的正常表现。
必须写成：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
注意：initial-scale=1.0也不能省——Safari 11.2+ 要求 viewport 同时满足这两个条件才启用env()。
- 只加
viewport-fit=cover但没initial-scale=1.0，某些 iOS 14–15 版本仍会静默降级 - 用 JS 动态插入 meta 标签无效：必须在 HTML 解析早期就存在，否则环境变量不会初始化
- React/Vue 等框架中，确保该 meta 标签在
<head>里硬编码，别依赖 SSR 或 hydration 时机
@supports检测必须用or连接env()和constant()
只写@supports (padding-bottom: env(safe-area-inset-bottom))会跳过 iOS 11.2——它不认识env()，整个@supports块被当无效语法丢弃，连 fallback 都不执行。
正确写法必须包含constant()作为兜底分支：
@supports (padding-bottom: env(safe-area-inset-bottom)) or (padding-bottom: constant(safe-area-inset-bottom)) {<br> .footer {<br> padding-bottom: constant(safe-area-inset-bottom);<br> padding-bottom: env(safe-area-inset-bottom);<br> }<br>}
立即学习“前端免费学习笔记（深入）”；
-
constant()写在env()前面：iOS 11.2 只认前者，后者被忽略；iOS 11.3+ 则忽略前者，采用后者 - Android WebView（如旧版微信）可能把
constant()当语法错误，所以@supports包裹必不可少 - 别用 UA 判断版本：Safari 的 WebKit 构建号比 iOS 系统版本更关键，且 UA 可伪造
padding-bottom是唯一推荐的承载属性
用margin-bottom: env(safe-area-inset-bottom)会导致可滚动高度异常增大，用户上滑时底部按钮突然“掉出”可视区——因为margin推的是整个盒模型，不是容器内部内容。
真正安全的写法只有：padding-bottom: env(safe-area-inset-bottom);
且必须前置一个 fallback 值：
padding-bottom: 20px;<br>padding-bottom: env(safe-area-inset-bottom);
- fallback 必须是固定值，不能是
env(safe-area-inset-bottom, 20px)：Safari 14.5 之前、Chrome 90 之前都不支持该语法，整条声明会被丢弃 - 不要对 fixed 元素用
padding：它脱离文档流，应改用bottom: env(safe-area-inset-bottom)或inset - 四边同时适配时，用
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);，别拆成四个独立声明
真机调试才能验证是否真生效
模拟器里env()常返回假阳性值，比如显示34px但实际未激活安全区上下文。只有真机 + Safari 技术预览版 + “开发者 > 当前页面 > 计算样式”里能看到实时像素值，才算真正生效。
- 检查 computed styles 中
padding-bottom是否显示为24px（iPhone 15）、0px（iPhone 8）等具体数值，而不是env(...)字面量 - JS 无法读取
env()运行时值：getComputedStyle(el).paddingBottom返回的是字符串"env(safe-area-inset-bottom)"，不是计算后数字 - 如果需要 JS 响应，只能靠
window.visualViewport?.height粗略估算，或监听resize事件结合屏幕高度差判断键盘弹出
