viewport-fit=cover是安全区适配的硬性开关，必须与width=device-width、initial-scale=1.0共存；缺它则env(safe-area-inset-*)恒为0px，所有css适配失效。
viewport-fit=cover 是安全区适配的启动开关
不设 viewport-fit=cover，后续所有 CSS 安全区适配都无效——浏览器根本不会暴露 env(safe-area-inset-*) 变量，constant() 也早已被 Safari 16.4+ 彻底废弃。必须在 <meta name="viewport"> 的 content 中显式声明：width=device-width, initial-scale=1.0, viewport-fit=cover。
常见错误是只写 width=device-width, initial-scale=1.0，或误用 viewport-fit=contain（这会让页面缩进显示，顶部留白，反而加剧刘海遮挡）。
-
viewport-fit=cover告诉浏览器：请让页面内容铺满整个物理屏幕，哪怕要越过圆角或刘海区域 - 它本身不解决遮挡，但为后续用
env()留出“可感知的安全边界”提供前提 - Android Chrome 79+、iOS Safari 11.2+ 均支持，无需 polyfill
用 env(safe-area-inset-*) 动态撑开主体容器
直接对 body 或最外层容器加 padding，而不是靠 JS 计算或硬编码像素值。安全区偏移量是动态的：横屏时 safe-area-inset-top 可能变成 safe-area-inset-left，系统字体缩放也会改变数值。
推荐写法（兼容 fallback）：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
body {
padding-top: env(safe-area-inset-top, 0px);
padding-right: env(safe-area-inset-right, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
padding-left: env(safe-area-inset-left, 0px);
}
- 每个
env()都带 fallback（如0px），避免旧浏览器解析失败导致样式崩塌 - 不要只加顶部和底部——iPhone 的 Home Indicator 在底部，Android 挖孔多在顶部，但部分折叠屏横屏时挖孔会移到左侧
- 若使用固定定位导航栏（
position: fixed），需单独对其设置top: env(safe-area-inset-top)，否则会贴顶被刘海吃掉
避免在安全区边缘放置关键交互元素
即使加了 padding，也不能默认“内容就绝对安全”。env() 提供的是最小安全距离，但实际渲染受字体缩放、动态行高、CSS transform 等影响。按钮、输入框、返回箭头这类操作目标，必须留出额外余量。
- 导航栏高度建议 ≥ 44px（iOS 最小触控尺寸），且其内部图标/文字距顶部至少
env(safe-area-inset-top)+ 8px - 底部 TabBar 若用
position: fixed; bottom: 0，必须配合padding-bottom: env(safe-area-inset-bottom)，否则会被 Home Indicator 截断 - 禁止把「确认」按钮紧贴屏幕底部边缘——用户单手握持时拇指难触达，且易与系统手势冲突
横竖屏切换时安全区会重计算，但 CSS 不会自动重排
设备旋转瞬间，env(safe-area-inset-*) 值立即更新，但已有布局不会重新 flow。如果页面存在高度依赖视口宽高的绝对定位元素（比如全屏轮播图、Canvas 渲染区域），仅靠 env() 不足以保证正确渲染。
- 监听
window.orientation已废弃，应改用matchMedia('(orientation: landscape)')或resize事件（注意节流） - 对 Canvas、Video 等媒体元素，需在 resize 后手动调用
canvas.width = canvas.clientWidth并重绘 - Flex/Grid 容器通常能自动响应，但若子项用了
min-height: 100vh，需改为min-height: -webkit-fill-available（Safari 专用）或通过calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom))补偿
安全区不是一次性配置项，而是贯穿整个生命周期的约束条件——它随系统设置、屏幕方向、甚至辅助功能开关实时变化。漏掉任意一环，都可能在某台真机上出现半截按钮或错位标题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
