安全区域适配：env safe-area-inset 与 viewport-fit cover

概述移动设备如刘海屏与圆角会造成可视区域与布局差异。通过在 meta 声明 `viewport-fit=cover` 并使用 `env(safe-area-inset-*)` 读取安全区边距，保证内容可见与操作可达。用法/示例<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> .app { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } 工程建议为固定头/尾与交互区域预留安全区；在横竖屏与不同设备验证表现。为不支持环境提供默认边距或条件加载；避免过度占位影响布局。与 `color-scheme` 与主题协作保证控件与背景对比度与可见性。参考与验证MDN：`env()` 与环境常量 — https://developer.mozilla.org/docs/Web/CSS/envweb.dev：Safe area — https://web.dev/articles/viewport-fit