Fullscreen API：沉浸式模式与交互策略

概述

Fullscreen API 允许元素进入/退出全屏，提升观看与演示体验。需在用户手势下调用并处理 `fullscreenchange` 事件同步 UI 状态。

示例

const el = document.getElementById('player')
document.getElementById('btn').addEventListener('click', async () => {
  if (!document.fullscreenElement) { await el.requestFullscreen() }
  else { await document.exitFullscreen() }
})
document.addEventListener('fullscreenchange', () => updateUI(!!document.fullscreenElement))

工程建议

• 手势与权限：在用户点击后进入全屏；处理失败与不同平台行为差异。
• 控件与提示：在全屏内提供退出控件与说明；保持键盘与可访问性。
• 回退：不支持时回退到窗口最大化或 PiP/Document PiP。

参考与验证

• MDN Fullscreen API 文档：https://developer.mozilla.org/docs/Web/API/Fullscreen_API
• WHATWG/规范说明：https://fullscreen.spec.whatwg.org/