媒体查询无法检测灵动岛，因其仅匹配静态参数且不能感知系统UI实时变化；正确方案是viewport-fit=cover配合env(safe-area-inset-top)动态适配安全区。
媒体查询本身不能直接检测“灵动岛”或顶部安全区高度，它不识别硬件特征或系统级安全区域变量。真正适配灵动岛顶部安全区，靠的是 viewport-fit=cover + CSS env() 函数，而不是 media query。
为什么 media query 不适合判断灵动岛？
iPhone 14 Pro 及后续机型（如 iPhone 15/16 全系）的灵动岛是动态区域：它在不同场景下会收缩、展开甚至合并多个活动，其占用高度并非固定值（例如状态栏+灵动岛总高可能为 59px、82px 或更高）。media query 只能基于设备宽高、分辨率、DPR 等静态参数匹配，无法感知系统 UI 的实时变化，也无法区分“普通刘海”和“灵动岛”——两者在 viewport 尺寸上并无本质差异。
正确做法：用 env(safe-area-inset-top) 动态响应
苹果通过 CSS 环境变量 env(safe-area-inset-top) 暴露当前实际的安全区顶部距离。这个值在灵动岛展开时会自动变大，在收起时回落，浏览器实时更新，无需 JS 干预。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 确保 viewport 设置为
viewport-fit=cover（否则 env 变量可能不生效或返回 0） - 对需要避开顶部的元素（如导航栏、返回按钮），用 padding 或 margin 向下推：
padding-top: env(safe-area-inset-top);
/* iOS 11.0–11.2 兼容写法（可选） */
padding-top: constant(safe-area-inset-top);
}
辅助判断：可用 media query 做粗粒度机型筛选（非必须）
若需为灵动岛机型做差异化样式（如增加顶部动效提示、预留更大呼吸空间），可结合已知机型特征做保守判断，但不能替代 env() 逻辑：
- 竖屏下屏幕高度 ≥ 926px（iPhone 14 Pro Max 分辨率 1290×2796，CSS px 高 ≈ 926）且横纵比接近 19.5:9，大概率是灵动岛机型
- 更稳妥方式是 JS 检测：
matchMedia('(prefers-reduced-motion: reduce)').matches或 UA 字符串含 "iPhone OS 16" 及以上，再配合env(safe-area-inset-top) > 44px判断是否处于展开态
关键提醒
不要试图用 @media (max-height: 844px) 这类规则去“排除”灵动岛——iPhone 14 Pro（844px 高）也有灵动岛，而部分安卓挖孔屏也可能有类似高度。安全区适配必须依赖系统提供的环境变量，这是唯一可靠、响应式、未来兼容的方案。
