安全区适配（Safe Area Insets）是什么：效果预览与 AI 设计提示词

效果预览

9:41●●●

底部按钮留出 home indicator 的位置

固定底部按钮

适合用在哪

所有移动端网页 / PWA。不适配的按钮会被 iPhone 圆角吃掉。

容易踩的坑

加了 env() 却忘了 viewport-fit=cover，inset 值始终为 0、适配无效。
横屏只处理 bottom 不处理 left/right，刘海遮住左侧导航按钮。
固定底栏用 height 加 inset 却不改内部对齐，图标被挤到安全区里。

设计提示词 · Prompt

安全区适配（Safe Area Insets）：viewport meta 加 viewport-fit=cover 开启全面屏延伸；然后用 env(safe-area-inset-top/right/bottom/left) 做内边距——底部固定栏 padding-bottom:calc(12px + env(safe-area-inset-bottom))，顶部横幅同理。关键位置：底部 Tab Bar、悬浮按钮、全屏弹窗的关闭按钮。用 @supports (padding: env(safe-area-inset-bottom)) 包裹做优雅降级。测试机型必须覆盖带刘海 iPhone 和安卓挖孔屏。别硬编码 34px——各家设备 inset 不同。

Safe Area Insets: Add viewport-fit=cover to the viewport meta to enable edge-to-edge display; then use env(safe-area-inset-top/right/bottom/left) as padding — a fixed bottom bar gets padding-bottom: calc(12px + env(safe-area-inset-bottom)), and a top banner likewise. Key spots: the bottom Tab Bar, floating buttons, the close button of full-screen modals. Wrap with @supports (padding: env(safe-area-inset-bottom)) for graceful degradation. Test devices must cover notched iPhones and Android punch-hole screens. Don't hard-code 34px — insets differ across devices.

常见搭配

同一页面里经常和「安全区适配」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

底部标签栏Bottom Tab Bar 悬浮操作按钮FAB (Floating Action Button)底部悬浮 CTA 条Sticky Bottom CTA Bar 抽屉面板Drawer / Sheet

演示 HTML 结构

<div class="s s--abs d-safe" style="background:linear-gradient(180deg,#fff,#f0f1f6)">
  <div class="d-safe__notchbar"><span>9:41</span><span>●●●</span></div>
  <span class="d-safe__cap">底部按钮留出 home indicator 的位置</span>
  <div class="d-safe__cta">固定底部按钮</div>
  <div class="d-safe__homebar"></div>
</div>