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

---

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

keywords:

• Fullscreen API
• requestFullscreen
• exitFullscreen
• fullscreenchange
• 沉浸式

description: 介绍全屏模式的请求与退出、变更事件与控件管理、权限与手势要求，以及在视频/画廊/演示中的应用与回退策略。

categories:

• 应用软件
• 编程开发

---

概述

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/