安全区与刘海屏适配
刘海屏 / 底部手势条会遮住页面内容。viewport-fit=cover 让内容延伸到安全区外，再用 env(safe-area-inset-*) 把关键内容推回安全区内。
四个方向：safe-area-inset-top（刘海）、bottom（手势条）、left/right（横屏刘海）。可与 max() 组合，既保留原内边距又适配安全区。
- 先加 viewport-fit=cover 才能拿到安全区变量
- env(safe-area-inset-bottom)：底部手势条高度
- 常与 max() 组合：padding: max(16px, env(safe-area-inset-bottom))
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- 必须加 viewport-fit=cover，env() 才有值 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <style> /* 底部固定栏：既要内边距，又要躲开手势条 */ .footer { position: fixed; left: 0; right: 0; bottom: 0; padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #eee; } /* 顶部留出刘海空间 */ .header { padding-top: env(safe-area-inset-top); } </style> </head> <body> <div class="header">顶部</div> <div class="footer">底部固定栏</div> </body> </html>
本节要点刘海屏适配两件套：viewport-fit=cover + env(safe-area-inset-*)；max() 保留最小内边距。
