全屏体验卡顿或崩溃源于错误实现：未清理动画帧、监听器中同步执行大量DOM操作、未设明确宽高、Safari仅支持webkitEnterFullscreen()、退出需用户手势触发、缺少viewport-fit=cover导致安全区失效，且全屏是DOM重绘边界需显式重置依赖视口的逻辑。

全屏本身不拖慢体验，但错误的实现方式会让页面卡顿、失焦甚至崩溃。

全屏 API 触发后页面卡顿或白屏

常见于未处理 fullscreenchange 事件监听器中同步执行大量 DOM 操作，或在全屏前未清理动画帧（requestAnimationFrame）导致重绘失控。

• 进入全屏前调用 cancelAnimationFrame 清理所有活跃动画帧
• 监听 fullscreenchange 时只做必要响应（如更新 UI 状态），避免在回调里执行 querySelectorAll 遍历深层节点或触发强制重排
• 确保全屏目标元素（如 video 或 canvas）已设置明确宽高，不依赖 CSS aspect-ratio 或 flex 自适应计算——这些在全屏切换瞬间易引发布局抖动

移动端 Safari 全屏后无法退出或手势失效

iOS 的 WebKit 对 document.webkitExitFullscreen() 支持不稳定，且默认禁用双击缩放、滑动回退等原生手势。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 只对 <video></video> 调用 webkitEnterFullscreen()（而非 requestFullscreen()），这是 Safari 唯一稳定支持的全屏入口
• 禁止在 video 外层包裹 div 并对其调用全屏——Safari 会静默失败，控制台无报错
• 退出全屏必须由用户手势触发（如按钮点击），不能靠定时器或 setTimeout 自动调用；否则 iOS 会拒绝执行

全屏下 CSS 浸入式状态栏/刘海区适配错乱

Android Chrome 和新版 Safari 支持 env(safe-area-inset-top)，但若未配合 viewport-fit=cover，安全区变量始终为 0。

立即学习“前端免费学习笔记（深入）”；

• <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 必须存在，缺一不可
• 状态栏高度仅在真正全屏（非“伪全屏”如 height: 100vh）时生效；检查是否误用 height: 100% 替代 100vh 导致容器未撑满
• 避免在全屏切换过程中动态修改 body 的 padding-top——应使用 CSS 变量 + :fullscreen 伪类统一控制，例如：

  body:fullscreen { padding-top: env(safe-area-inset-top); }

最常被忽略的是：全屏不是样式问题，是生命周期问题。每次进入/退出都是一次 DOM 重绘边界，所有依赖视口尺寸的逻辑（比如 canvas resize、video poster 加载、第三方 SDK 的渲染钩子）都得显式重置，而不是指望浏览器自动补救。