移动端底部安全区需用 env(safe-area-inset-bottom) 配合 padding-bottom 作用于 fixed 底部导航栏自身，或用 margin-bottom 作用于主体内容；禁用 body 或根容器 padding-bottom，以免破坏滚动与触底判断。
移动端底部安全区（如 iPhone 的 home indicator 区域）需要留出可操作空间，padding 是合法且常用手段，但**不能直接用在 body 或根容器上盲目加 padding-bottom**——它会破坏滚动行为、干扰 IntersectionObserver、导致触底逻辑失效。
env(safe-area-inset-bottom) 必须配合 padding 使用
iOS Safari 提供的 env(safe-area-inset-bottom) 是动态值，只在支持安全区的设备上返回非零值（如 34px），但它本身不产生任何布局效果，必须赋给某个盒模型属性才能生效。
-
padding-bottom: env(safe-area-inset-bottom);是标准写法，适用于固定定位的底部导航栏自身（如.nav），让其内容避开 home indicator - 不能写成
margin-bottom: env(safe-area-inset-bottom);——margin 不会撑开容器内部空间，无法防止内容被遮挡 - 该环境变量在不支持的浏览器中默认为 0，无需 fallback，但建议加
@supports包裹以明确语义
主体内容该用 margin-bottom 而不是 padding-bottom
当底部导航栏是 position: fixed 时，主体内容（如 main）容易被遮盖。此时空白空间应加在内容块自身，而非父容器。
-
main { margin-bottom: env(safe-area-inset-bottom); }更合理：它把内容“往上推”，不改变body高度，滚动区域完整，scrollHeight和触底判断不受影响 - 避免
body { padding-bottom: env(safe-area-inset-bottom); }：这会让body内部多出一段不可见但占空间的 padding，滚动条拉到底部时仍可能露出白边或触发错误的“已到底”事件 - 如果页面使用了
min-height: 100vh，padding-bottom还可能导致高度超出视口，出现意外滚动
padding-bottom 在 fixed 元素内部才真正安全
对固定定位的底部栏自身设置 padding-bottom，是最可控、副作用最小的方式。
立即学习“前端免费学习笔记（深入）”；
- 例如：
.nav { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom); } - 这样既撑开了导航栏内部高度，又让按钮/文字自然上浮到安全区内，同时不影响文档流中其他元素
- 若导航栏有背景色或阴影，
padding区域会继承这些样式，视觉上更连贯；margin则完全透明，起不到填充作用 - 注意：需确保该元素未设置
height固定值，否则padding-bottom可能被截断
真正容易被忽略的是：安全区值只在 viewport 尺寸变化时更新（比如地址栏收起），而 env() 不会触发重排。如果你的底部栏高度本身响应式变化，仅靠 padding-bottom: env(...) 不够，还得监听 resize 并结合 window.visualViewport?.height 做兜底校准。
