使用 env() 函数配合 css 变量即可适配 iphone 底部小黑条与刘海屏。核心做法是将布局的安全区域（safe area）引入样式中，通过 safe-area-inset-bottom 和 safe-area-inset-top 让内容避开系统 ui 遮挡。具体实现时，在根元素或特定容器上设置 padding 调用该函数，浏览器会自动根据设备类型填充实际像素值，非全面屏设备则忽略该值。
如何定义全局安全区域变量
在全局样式中定义 CSS 自定义属性是最佳实践。将 env(safe-area-inset-bottom, 0px) 赋值给一个语义化的变量如 --safe-bottom，这样后续所有组件只需引用变量即可。默认值 0px 用于兼容不支持该特性的旧浏览器或普通桌面端，确保布局不会因缺失变量而崩溃。
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--safe-left: env(safe-area-inset-left, 0px);
--safe-right: env(safe-area-inset-right, 0px);
}
body {
padding-top: var(--safe-top);
padding-bottom: var(--safe-bottom);
}
上述代码定义了四个方向的变量。在 body 层级应用 padding 可以确保整个页面内容都位于安全区域内。对于需要固定定位的底部导航栏，通常不直接使用 padding，而是结合 bottom 属性或 padding-bottom 来留出空间，防止内容被 Home Indicator 覆盖。
如何适配固定定位的底部导航栏
固定定位的元素不受文档流 padding 影响，必须显式处理安全区域。将 position: fixed 的底部导航栏的 bottom 设为 var(--safe-bottom)，或者在导航栏内部增加 padding-bottom。关键在于区分“内容避让”与“控件避让”。如果导航栏本身是交互控件，应让其占据安全区域外的空间；如果导航栏下方有滚动内容，需确保内容不被遮挡。
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: calc(60px + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
background: #fff;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}
.nav-content {
height: 60px;
display: flex;
align-items: center;
justify-content: space-around;
}
这段代码通过 calc() 计算总高度，将图标区域固定在 60px，剩余部分由 var(--safe-bottom) 填充。这样既保证了按钮的可点击区域足够大，又避免了内容被小黑条遮挡。注意 padding-bottom 直接作用于容器，比修改 bottom 属性更直观且易于维护。
刘海屏顶部状态栏如何处理
刘海屏主要影响顶部视觉，通过 env(safe-area-inset-top) 控制顶部间距。对于头部导航栏，同样建议使用 padding-top 而非 margin-top，以保持盒模型一致性。若设计稿包含背景图延伸至顶部，需配合 viewport-fit=cover meta 标签使用，否则 env() 可能返回 0 或无效值。
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
添加 viewport-fit=cover 后，网页视口将扩展至屏幕边缘，此时 env(safe-area-inset-top) 才会返回真实的刘海高度。在 CSS 中，可将头部容器的 padding-top 设为 var(--safe-top)，确保标题文字不被刘海遮挡。对于 iOS 11+ 版本，此方法有效；更早版本需回退到固定像素值或使用媒体查询检测特定机型。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
