HTML5适配异形屏需声明safe-area-inset-*变量并启用viewport-fit=cover；必须用meta设置width=device-width和viewport-fit=cover；CSS中constant()与env()双声明且constant在前；不同定位元素需分别处理padding或top/bottom。
要在 HTML5 中正确适配异形屏（如刘海屏、挖孔屏、底部手势条），关键不是“检测有没有刘海”，而是主动声明内容边界——用 safe-area-inset-* 环境变量预留系统不可用区域的空间，并确保浏览器启用该能力。下面分三步讲清楚核心操作和常见陷阱。
必须加 viewport-fit=cover 并配齐 meta 属性
不加这个，env(safe-area-inset-bottom) 永远是 0px，所有后续 CSS 都无效。
- meta 标签必须同时包含
width=device-width和viewport-fit=cover，缺一不可 - 正确写法：
<meta name="viewport" content="width=device-width, viewport-fit=cover"> - 避免混用已废弃的
target-densitydpi，它会让 viewport-fit 被忽略 - 如果需禁用缩放，可加
maximum-scale=1.0，部分旧 WebView 依赖它确认 cover 模式生效
用 env() + constant() 双声明做兼容性兜底
iOS 11.0–11.1 只认 constant()，iOS 11.2+ 和现代 Safari/Chrome 只认 env()。两者必须共存，且顺序不能错。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 正确写法（两条独立声明，
constant在前）：padding-top: constant(safe-area-inset-top, 0px);padding-top: env(safe-area-inset-top, 0px); - fallback 值必须带单位（如
0px），写成0会失效 - 不要合并为一条（如
padding-top: constant(...) env(...)），这是非法 CSS - Android Chrome 大多不支持这些变量，建议用
@supports (padding-top: env(safe-area-inset-top))做渐进增强
适配不同定位方式的内容元素
padding 和 position 的处理逻辑完全不同，不能混用。
立即学习“前端免费学习笔记（深入）”；
- 对
<body>或根容器设padding-top/padding-bottom，适用于常规流式内容 - 对
position: fixed的顶部导航栏，不能只靠 body padding：应设top: env(safe-area-inset-top, 0px)替代top: 0 - 对吸底的 fixed 按钮或 tabbar，设
bottom: env(safe-area-inset-bottom, 0px)，同时确保其父容器有足够高度容纳它 - 避免在
height: 100vh的容器上仅加 padding —— 100vh 已含刘海区域高度，再加 padding 会造成双倍留白
