"安全区域适配：viewport-fit=cover 与 env(safe-area-inset) 实战"

概述在具有刘海/圆角的设备上，系统保留的安全区域可能遮挡内容。通过 `<meta name="viewport" content="viewport-fit=cover">` 允许内容铺满屏幕，并用 CSS 的 `env(safe-area-inset-*)` 常量为边距留出空间。示例<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <style> .app { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) } </style> 工程建议仅在需要的页面启用铺满；为固定头/底栏使用 `env()` 补齐边距并确保可访问性与可点击区域。与全屏/视图过渡：在沉浸式状态下调整安全区域；测试横竖屏与不同设备差异。兼容：不支持 `env()` 的浏览器提供回退数值或合理内边距。参考与验证MDN viewport-fit 与安全区域文档：https://developer.mozilla.org/docs/Web/CSS/envweb.dev 安全区域指南：https://web.dev/articles/viewport-fitApple Human Interface 指南相关章节：https://developer.apple.com/design/human-interface-guidelines/