全屏API可通过requestFullscreen()使元素全屏，exitFullscreen()退出，结合fullscreenElement和fullscreenchange实现状态管理，需在用户操作中调用并处理浏览器兼容性。

要让HTML5网页中的元素（如视频、游戏或整个页面）进入全屏显示，可以通过浏览器提供的全屏API（Fullscreen API）来实现。这个API允许开发者控制页面或某个元素以全屏模式展示，提升用户体验。

1. 全屏API的基本用法

Fullscreen API 提供了几个关键方法和属性，用于控制全屏状态：

• requestFullscreen()：使元素进入全屏模式
• exitFullscreen()：退出全屏模式
• fullscreenElement：返回当前处于全屏状态的元素
• fullscreenchange 事件：全屏状态改变时触发

例如，让整个文档 body 进入全屏：

2. 调用全屏的完整示例

以下是一个按钮点击后使页面进入全屏，并提供退出功能的示例：

3. 浏览器兼容性处理

由于不同浏览器对全屏API的实现可能存在前缀差异，建议添加兼容性封装：

function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { // Safari等
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

// 使用示例：
enterFullscreen(document.body);

同样，exitFullscreen 和 fullscreenElement 也需要做类似兼容处理。

4. 注意事项与限制

使用全屏API时需注意以下几点：

• 必须在用户操作（如点击、按键）中调用 requestFullscreen，不能在页面加载时自动执行，否则会被浏览器阻止
• 某些浏览器（如移动端Safari）对全屏支持有限，可能不完全生效
• 全屏状态下按 Esc 或 F11 可退出，也可通过 JavaScript 控制
• 部分浏览器会显示全屏提示栏

基本上就这些。掌握 Fullscreen API 后，可以很好地增强视频播放器、在线游戏或演示类网页的沉浸体验。注意做好异常捕获和兼容处理，确保稳定运行。