必须加 viewport-fit=cover，否则 ios 上 env(safe-area-inset-bottom) 恒为 0；正确写法是 放在 最前。
viewport-fit=cover 必须加，否则 env() 变量恒为 0
不加 viewport-fit=cover，env(safe-area-inset-bottom) 在 iOS 上永远返回 0px。这不是浏览器 bug，是系统默认行为：iOS 用 contain 模式自动避开安全区，你的按钮会被“温柔地”挤上去，结果悬在黑条上方 20px 处，用户点不到。
正确写法只有一行，且必须放在 最前面：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
漏掉 initial-scale=1.0，部分 iOS 版本会直接忽略 viewport-fit；写成 viewport-fit: cover（CSS 写法）则完全无效。
bottom 值要用 calc() 还是 env() 兜底？
直接写 bottom: env(safe-area-inset-bottom, 24px) 是最简稳解。iOS 11+ 识别该变量，老设备 fallback 到 24px；安卓无视它，但也不报错——这正符合预期。
别用 calc(24px + env(safe-area-inset-bottom))：
- iOS 15.4 之前不支持这种组合，整条规则失效
- 安卓不支持
env()，加了calc()反而让旧版 Safari 和所有安卓浏览器全退到0
真正需要叠加的场景极少，比如你明确要求「24px 基础偏移 + 安全区额外留白」，那应改用 JS 动态计算，而非硬塞进 CSS。
键盘弹出时按钮被顶起，纯 CSS 无解
Android Chrome 80+、UC、QQ 浏览器等根本不支持 env(safe-area-inset-bottom)，更不响应任何键盘相关的环境变量。它们在软键盘弹出时，会错误重绘 fixed 元素的 bottom，但点击热区不动——按钮视觉上被顶走，手指却还在原位点。
实操只能靠 JS：
- 监听
focusin事件，在<input>或<textarea></textarea>获焦时临时设style.bottom = 'calc(24px + env(safe-area-inset-bottom))' - 监听
blur恢复原始值 - 更稳妥的替代：放弃
fixed，改用position: absolute+ 动态计算父容器高度（前提是父级position: relative且高度可控）
z-index 和点击穿透问题常被忽略
按钮被轮播图、弹窗、广告遮住，不是层级不够高，而是祖先元素触发了新的层叠上下文（stacking context），比如 transform: translateZ(0)、filter 或 opacity 。此时再大的 <code>z-index 也无效。
确保按钮直挂 ，并检查：
- 父容器没设
overflow: hidden或transform - 按钮自身有
z-index: 9999（数值够大即可，不用追求最大） - 加
touch-action: manipulation提升点击响应优先级，防 300ms 延迟干扰坐标判定
真机测试时务必开启「缩放辅助」功能——很多点击偏移只在此模式下暴露。事情说清了就结束。安全区适配只是起点，横竖屏切换、深色模式、系统字体放大、折叠屏展开，每个都得单独验证，没法靠一套 CSS 通吃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
