viewport-fit=cover是iOS Safari中让网页内容延伸至刘海、灵动岛等异形区域的必要声明，不加则页面被强制限制在安全区内导致顶部留白、底部遮挡；必须与width=device-width、initial-scale=1.0共存才生效，且仅WebKit内核支持，安卓忽略无副作用。
Viewport-fit=cover 是什么，为什么必须加
不加 viewport-fit=cover，iOS Safari 默认会把网页内容缩放到安全区域内显示——也就是避开灵动岛、刘海、底部指示条，导致顶部和底部大片留白，实际可视区域被严重压缩。加了之后，页面才能真正“贴边”渲染，让开发者自己控制哪些区域该显示、哪些该留空。
它只对 WebKit（即 iOS Safari 和 WKWebView）生效，安卓浏览器忽略该属性，不影响兼容性。
-
viewport-fit=auto（默认值）：强制内容进安全区，无法覆盖异形区域 -
viewport-fit=cover：允许内容延伸至屏幕边缘，env()变量才可用
配合 env() 使用时的常见错误写法
很多人写了 viewport-fit=cover 却发现 env(safe-area-inset-top) 没效果，根本原因是：CSS 中必须用 env() 替代 constant()，且不能直接写在非支持环境里当 fallback。
- iOS 11.2+ 用
env(safe-area-inset-top)，constant()已废弃，Safari 16.4 后完全不支持 - 不要写成
padding-top: constant(safe-area-inset-top)—— 这行会直接失效，连带整条声明可能被忽略 - 推荐写法是叠加 fallback：
padding-top: 20px; padding-top: env(safe-area-inset-top, 20px);
灵动岛适配中容易被忽略的交互细节
灵动岛不是静态“黑条”，它是可交互、可伸缩的系统级 UI。单纯靠 env(safe-area-inset-bottom) 做底部留白，在通话、录音等场景下会出问题——此时底部 inset 可能从 34px 突然变成 80px+，而页面没监听变化。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 不要仅依赖初始 CSS 计算；需监听
window.visualViewport的resize事件（iOS 16.4+ 支持） - 避免用
position: fixed+bottom: 0覆盖底部——灵动岛展开时会被遮挡或错位 - 关键操作按钮（如“完成”“发送”）建议放在
env(safe-area-inset-bottom)之上至少 12px，留出触控余量
真机调试时 viewport-fit 不生效的排查点
本地开发服务器（如 localhost:3000）通过 Safari 打开时，viewport-fit=cover 可能被忽略，这不是代码问题，而是 iOS 的限制策略。
- 必须通过 HTTPS 访问（包括本地自签名证书 + 配置信任）；HTTP 或 file:// 协议下该属性无效
- 确保
<meta>标签在<head>最前面，且没有其他重复或冲突的viewport声明 - Safari 开发者菜单里打开「显示渲染边界」，能看到红色虚线框——那是安全区边界，不是屏幕物理边缘
异形屏适配不是加一行 meta 就完事，核心在于理解 env() 是动态变量，而灵动岛的尺寸变化是运行时行为。漏掉 resize 监听或硬编码固定值，上线后用户一接电话，UI 就崩一半。
