安全区域（safe-area-inset）是浏览器通过env()函数暴露的四个css环境变量，用于标记刘海屏等异形屏的不可用边缘区域；需配合viewport-fit=cover启用，并用fallback值做兼容处理。
什么是安全区域（safe-area-inset）
刘海屏、挖孔屏、曲面屏的顶部/底部/左右边缘会遮挡内容，浏览器通过 env() 函数暴露四个 CSS 环境变量来标记这些不可用区域： safe-area-inset-top、safe-area-inset-bottom、safe-area-inset-left、safe-area-inset-right。它们的值是像素长度（如 44px），仅在支持异形屏的系统（iOS 11+、部分 Android 10+ WebView）中有效，其他环境返回 0px。
关键点在于：这不是“检测刘海”，而是“声明内容边界”——你告诉浏览器“别把文字或按钮塞进这个区域里”。
怎么用 env() 给 padding 或 margin 留白
最常用且稳妥的方式是给根容器或导航栏加内边距，避免内容被遮挡：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
body {
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
}
- 必须配合
env()的 fallback 参数（如0px），否则 Safari 旧版本会直接忽略整条声明 - 不要只加
top—— iPad Pro 的横屏 Home Indicator 在底部，Android 折叠屏可能左右有黑边 - 如果页面已有固定高度的 header，优先给 header 内部元素加
padding-top，而不是整个body，否则可能引发滚动错位
viewport-fit=cover 是什么，为什么必须加
默认情况下，iOS Safari 会将网页渲染在“安全区域”内（即自动裁掉刘海/Home Indicator 区域），导致左右/上下留黑边。要让页面真正撑满屏幕，必须在 <meta name="viewport"> 中启用扩展视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
viewport-fit=cover是开启env()变量的前提——没它，safe-area-inset-*全是0px - 加了它之后，页面会全屏渲染，但内容可能被遮挡，所以必须同步用
env()控制留白 - 部分安卓 WebView 对
viewport-fit支持不一致，建议搭配@supports (padding-top: env(safe-area-inset-top))做渐进增强
fixed 定位元素（如底部 TabBar）怎么避让 Home Indicator
底部常驻的 position: fixed 元素最容易被 iPhone X+ 的 Home Indicator 挡住。正确做法不是硬写 bottom: 34px，而是动态适配：
.tabbar {
position: fixed;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0px);
/* 如果需要底边对齐，则用 margin-bottom 替代 padding-bottom */
}
- 用
padding-bottom是为了让内部按钮可点击区域上移，同时保持容器视觉位置不变 - 若需容器本身下移（比如悬浮按钮贴底），改用
margin-bottom: env(safe-area-inset-bottom) - 绝对定位的弹窗遮罩层（
z-index很高）也要检查是否覆盖了状态栏——可在html或body上加padding-top统一处理
实际项目中最容易漏的是横屏场景：iPad 的 Home Indicator 会从底部移到右侧，safe-area-inset-right 在横屏时才生效，这点常被忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
