移动端安全区域怎样避免内容被刘海和底部手势条遮挡？
使用 env() 安全区域变量配合布局 padding，理解 viewport-fit、固定底栏和横竖屏切换的边界。
参考答案
env(safe-area-inset-top/right/bottom/left) 提供设备安全区域的环境变量，适合给全屏页面、固定顶部栏和底部操作栏增加内边距。通常需要结合 viewport 的 viewport-fit 配置，并保留普通设备的零值回退。
安全区域是布局约束，不是一个固定像素。横屏、旋转、分屏和浏览器 UI 变化都可能改变值；底部栏应把可点击区域和背景延伸区分开，不能只给文字加 padding。
同时要处理键盘、VisualViewport 和滚动容器，避免安全区域 padding 与键盘避让重复叠加。真实设备测试比桌面模拟器更可靠。