应将 padding-bottom: calc(60px + env(safe-area-inset-bottom)) 加在最外层内容容器（如 #app），并确保 viewport meta 同时包含 width=device-width、initial-scale=1.0 和 viewport-fit=cover，三者缺一不可。
直接给主体容器加 padding-bottom，值为 calc(60px + env(safe-area-inset-bottom))，并确保 <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 存在——缺了这句，env(safe-area-inset-bottom) 永远是 0px，所有适配都白搭。
为什么 bottom: 0 的 fixed 导航栏总被 Home Indicator 截断
iOS 默认把网页限制在安全区内，bottom: 0 实际贴的是物理底边，而 Home Indicator 就在那儿。不是样式写错了，是视口没放开。
-
viewport-fit=cover必须和width=device-width、initial-scale=1.0同时存在，三者缺一不可 - 微信 iOS 客户端（尤其 8.0.32 之前）可能忽略
viewport-fit，需 JS 检测 UA fallback 到固定值（如padding-bottom: 34px） - 别在
上设overflow: hidden，否则软键盘弹出时 fixed 元素会被裁剪
padding-bottom 应该加在哪个元素上
必须加在最外层内容容器（比如 #app 或 <main></main>），而不是 ，更不是导航栏自己。
- 加在
上会影响全局，比如表单弹出键盘时整个页面被顶起 - 加在导航栏自身上无效：它已经
position: fixed，padding-bottom只撑内部内容，不改变定位位置 - 值要匹配导航栏真实高度（含内边距、border），建议用 CSS 自定义属性统一管理：
--nav-height: 60px - 旧版 Safari（15.4 之前）不支持
calc(60px + env(safe-area-inset-bottom))，得拆成两行：padding-bottom: 60px和padding-bottom: calc(60px + env(safe-area-inset-bottom))
软键盘弹出后按钮又被顶到屏幕中间怎么办
这不是 CSS 能解决的——iOS Safari 和微信 WebView 在键盘弹出后，env(safe-area-inset-bottom) 不会更新，但视口高度缩了，导致预留的 padding-bottom 过大。
- 监听
focus/blur事件比resize更可靠（部分安卓机型resize不触发） - 键盘弹起时临时移除或减小
padding-bottom；收起后再恢复 - 若用
visualViewportAPI，注意 Android Chrome 82+ 才支持，iOS Safari 不支持 - 微信 WebView 中，
focus事件可能延迟或丢失，建议加防抖 + fallback 定时器
真正容易被忽略的点是：安全区变量只在 viewport-fit=cover 生效，且只对 padding 和 margin 有效；bottom、height 等定位/尺寸属性不能直接用 env()，写了也静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
