必须配合viewport-fit=cover且作用于padding-bottom才有效，否则env(safe-area-inset-bottom)恒为0px；需设在内容容器上并声明box-sizing:border-box，旧版需fallback constant()，safari 15.4+才支持calc()混用。
直接用 padding-bottom + env(safe-area-inset-bottom) 就能解决 iPhone 底部黑条遮挡，但必须配 viewport-fit=cover，否则 env() 返回 0px——这不是你写错了，是 meta 缺了。
为什么 fixed 按钮总被盖住
因为 position: fixed 完全脱离文档流，浏览器不会为它留空间；滚动到底部时，内容自然“钻”进按钮下面。加 margin-bottom 无效：它不撑开容器高度，还会和父元素 margin 折叠。必须用 padding-bottom，它是内容区域内部的留白，能真实推高可用区域。
-
padding-bottom要设在最外层内容容器上（比如#app或main），别直接改body - 值要匹配按钮实际高度（含
padding、border，不含margin） - 务必声明
box-sizing: border-box，否则padding会让容器额外变高
如何适配 iPhone 安全区（刘海/小横条）
只写 padding-bottom: 60px 在 iPhone X 及之后机型上仍会被 Home Indicator 截断，因为系统要求内容离物理底边至少 env(safe-area-inset-bottom) 的距离（通常是 34px）。这个值不能硬编码，必须动态获取。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 前提：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">必须存在，缺了它env(safe-area-inset-bottom)永远是0px - 正确写法（双保险兼容 iOS 11.0+）：
padding-bottom: constant(safe-area-inset-bottom);和padding-bottom: env(safe-area-inset-bottom);两行都写，旧版 Safari 认constant，新版认env - 如果还要加固定间距（比如按钮高 60px，再加 8px 间隔），Safari 15.4+ 才支持
calc(60px + env(safe-area-inset-bottom))；旧版必须拆成两行：padding-bottom: 60px;和padding-bottom: calc(60px + env(safe-area-inset-bottom));
软键盘弹出时按钮又被顶穿怎么办
iOS Safari 和微信 WebView 在软键盘弹出后，env(safe-area-inset-bottom) 不会更新，但视口高度缩了，导致原本留白的 padding-bottom 过大，内容被顶到屏幕中间——这不是 CSS 能单靠样式解决的，得靠 JS 动态响应。
- 监听
visualViewport的resize事件：window.innerHeight - visualViewport.height就是被键盘遮挡的高度，把它赋给按钮的bottom值即可让按钮“浮”在键盘上方 - 更稳妥的做法是在输入框
focusin时临时移除容器的padding-bottom，blur时恢复 - 安卓完全不支持
env(keyboard-inset-bottom)，iOS 16.4+ 才有，所以 JS fallback 是必须项，不能只靠 CSS
真正容易被忽略的是 viewport meta 和 box-sizing 的组合效应：少一个，env() 就失效；漏一个，padding 就多占空间。这些不是“可选配置”，是生效前提。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
