必须同时写padding-bottom: constant(safe-area-inset-bottom)和padding-bottom: env(safe-area-inset-bottom)，旧版ios（11.0–11.1）依赖constant，新版标准为env，浏览器自动忽略不支持的声明。
用 env() 和 constant() 直接设置 padding-bottom
iOS 设备底部有安全区域（比如 iPhone X 及之后机型的圆角+Home Indicator），不处理会导致固定底部栏被遮挡。最轻量的做法就是不用 JS，直接在 CSS 里用环境变量：
.bottom-bar { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }
这两行必须都写，constant() 是旧版 iOS（11.2 之前）用的，env() 是新版标准，浏览器会自动忽略不支持的那条。注意：只加 padding-bottom 不够，如果元素是 position: fixed; bottom: 0，还得确保它没被父级 overflow: hidden 截断。
当底部是输入框时，cursor-spacing 必须配合安全区高度
单纯加 padding 不能解决键盘弹出后输入框被遮住的问题——尤其是 uni-app 或小程序里。这时候光靠 CSS 不行，得靠运行时获取安全区距离：
-
uni.getSystemInfo()返回的safeArea.bottom是屏幕底边到安全区底边的距离（单位 px） - 实际要留空的是
screenHeight - safeArea.bottom，也就是安全区外可交互的高度 - 把这个值传给
input的cursor-spacing属性，才能让光标和键盘保持合理间距
示例：<input :cursor-spacing="bottomPadding || 20">，其中 bottomPadding 是计算出来的数值，不是 CSS 变量。
Tailwind 中写 env() 要绕过 JIT 编译限制
Tailwind 默认不会把 env(safe-area-inset-bottom) 当作合法值处理，直接写 pb-[env(safe-area-inset-bottom)] 会报错或被忽略。正确做法是：
- 在
tailwind.config.js的theme.extend.spacing里手动注册一个 key，比如'safe-bottom': 'env(safe-area-inset-bottom)' - 然后用
pb-safe-bottom类名生效 - 或者更简单：直接在组件样式里写
style="padding-bottom: env(safe-area-inset-bottom)"，不走 Tailwind 类名体系
别试图用 px-* 或 py-* 去模拟，那些都是预设的固定数值，无法响应设备差异。
安卓设备不需要额外处理安全区
目前主流安卓厂商（包括华为、小米、OPPO、vivo）没有统一的安全区概念，也没有 env() 对应的等效变量。部分折叠屏或异形屏可能有状态栏/导航栏偏移，但那是系统级 UI 行为，前端只需保证内容不被状态栏遮挡（用 env(status-bar-height) 的场景极少，且无广泛支持）。所以移动端适配安全区，基本是 iOS 专属问题。
真正容易被忽略的是：即使写了 env()，如果父容器设置了 transform、filter 或 will-change，也会创建新的层叠上下文，导致 position: fixed 元素的定位参考变成该容器而非视口——这时 env() 生效了，但元素位置已经偏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
