必须添加viewport-fit=cover，否则env()返回0；padding-bottom需按constant→env顺序书写；env()仅适用于padding、margin等长度属性，不可用于bottom或height；calc()混用env()在safari 15.4前不支持。
viewport-fit=cover没加，env()永远是0
写了padding-bottom: env(safe-area-inset-bottom)却没效果？90%是因为<meta name="viewport">里漏了viewport-fit=cover。iOS Safari默认用viewport-fit=contain，此时系统根本不会注入safe-area-inset-*变量，env()一律返回0px——不是你CSS写错了，是开关没打开。
必须写全这一行，且不能带空格或换行：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">user-scalable=yes会干扰安全区上下文，建议移除。
padding-bottom要写两遍，顺序不能反
constant(safe-area-inset-bottom)是iOS 11.0–11.1的兼容写法，env(safe-area-inset-bottom)是当前标准。Safari遇到不认识的函数会直接忽略整条声明，所以必须按旧→新顺序书写：
padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
错误写法（新版覆盖旧版，旧设备彻底失效）：padding-bottom: env(safe-area-inset-bottom);padding-bottom: constant(safe-area-inset-bottom);
别把env()用在bottom或height上
env(safe-area-inset-bottom)只能参与长度计算，且仅在padding、margin（部分浏览器）、inset等接受长度值的属性中生效。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- ❌
bottom: env(safe-area-inset-bottom);（Safari忽略，回退为0） - ❌
height: env(safe-area-inset-bottom);（语法错误，不解析） - ✅
padding-bottom: env(safe-area-inset-bottom); - ✅
inset-block-end: env(safe-area-inset-bottom);（需配合position: fixed）
真正起作用的是“撑开内容区域”，不是挪动定位锚点。
calc()混用env()有版本坑
想加基础间距（比如导航栏高60px再留8px间隔），写calc(60px + env(safe-area-inset-bottom))看似合理，但Safari 15.4之前不支持env()在calc()里运算，整条声明会被丢弃。
稳妥做法是分层降级：
-
padding-bottom: 60px;（兜底） -
padding-bottom: calc(60px + env(safe-area-inset-bottom));（Safari 15.4+）
注意：env()不支持乘除，calc(env(safe-area-inset-bottom) * 2)会直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
