padding-bottom比margin-bottom更可靠，因其是内容区域内部留白，能真实撑开高度；而margin-bottom易折叠且对fixed元素无感知。必须作用于#app等外层容器，配box-sizing:border-box，并设viewport-fit=cover启用env(safe-area-inset-bottom)，且按constant()在前、env()在后的顺序书写。
为什么padding-bottom比margin-bottom更可靠
fixed底部按钮遮挡内容，根本原因是它脱离文档流，浏览器不会为它预留空间。给内容容器加margin-bottom看似合理，但容易被外边距折叠、不触发重排，且对fixed元素无感知；而padding-bottom是内容区域内部的留白，能真实撑开可用高度。
- 必须作用于最外层内容容器（如
#app或main），别直接改body或html，否则顶部状态栏区域可能错位 - 值要严格匹配底部元素实际高度（含
padding和border，不含margin） - 务必搭配
box-sizing: border-box，否则padding会让容器总高度超出预期
如何让env(safe-area-inset-bottom)真正生效
env(safe-area-inset-bottom)返回0px不是CSS写错了，而是iOS Safari默认用viewport-fit=auto，压根没启用安全区API。漏掉viewport-fit=cover，哪怕其他代码全对，这个值也恒为0px。
- 必须在
中声明：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> - 部分构建工具（如Vite插件）会自动注入
meta标签，但可能覆盖或忽略viewport-fit，需手动检查最终HTML源码 -
env()只对padding和margin有效，不能用于bottom、top等定位属性——写bottom: env(safe-area-inset-bottom)不生效，旧版Safari还会直接丢弃整条规则
兼容iOS 11.0–11.2的老版本写法
iOS 11.0–11.2只认constant()，新版用env()，两者必须共存，且顺序不能错。顺序反了（env()在前）会导致老版本直接忽略该声明。
- 正确写法：
padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - 如果还要叠加固定高度（比如按钮高60px，再加8px间隔），旧版Safari不支持
calc(60px + env(safe-area-inset-bottom))，得拆成两行降级：padding-bottom: 60px;padding-bottom: calc(60px + env(safe-area-inset-bottom)); - 不要在
body或html上加这些样式，否则整个页面下移，顶部状态栏区域也可能错位
软键盘弹出后按钮又被顶穿怎么办
CSS无解。iOS Safari和微信WebView的env(safe-area-inset-bottom)在键盘弹出时不会更新，但视口高度会缩，导致原本预留的padding-bottom过大，内容被顶到屏幕中间。这不是你漏写了什么，是已知限制。
- 更可靠的方案是监听
visualViewport变化：const baseHeight = visualViewport.height;，然后在resize事件里计算差值并动态调整按钮位置 - 安卓完全不支持
env(keyboard-inset-bottom)，也不能依赖resize事件的稳定性，需 fallback 到focusin/blur配合setTimeout读取window.innerHeight - 最容易被忽略的是：单纯监听
focus事件会漏掉长按调出菜单、点击键盘“收起”按钮等场景，blur也不一定触发，必须靠视口高度比对
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
