HTML5全屏API可通过调用元素的requestFullscreen方法实现全屏，需兼容不同浏览器前缀，并由用户操作触发，配合exitFullscreen退出及fullscreenchange监听状态。
HTML5 提供了全屏 API（Fullscreen API），可以让网页中的元素（如视频、图片、游戏画布等）进入全屏模式，提升用户体验。这个功能在视频播放器、在线游戏和演示页面中非常实用。下面详细介绍如何使用 HTML5 全屏 API 实现全屏功能。
检测浏览器支持情况
由于不同浏览器对全屏 API 的实现略有差异，使用前应先检测是否支持。可以通过检查 DOM 元素上是否存在 requestFullscreen 方法来判断：
- 现代标准方法：
element.requestFullscreen() - Chrome 和旧版 Safari：
element.webkitRequestFullscreen() - Firefox：
element.mozRequestFullScreen() - IE/Edge 旧版本：
element.msRequestFullscreen()
示例代码：
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}让元素进入全屏模式
调用目标元素的请求全屏方法即可进入全屏。比如让一个 div 或 video 元素全屏显示：
立即学习“前端免费学习笔记（深入）”；
const elem = document.getElementById('myVideo');
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { / Safari /
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) { / Firefox /
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) { / IE11 /
elem.msRequestFullscreen();
}
}
然后通过按钮触发：
退出全屏模式
可以使用 document.exitFullscreen() 方法退出全屏状态：
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}添加退出按钮：
监听全屏状态变化
通过监听 fullscreenchange 事件，可以知道当前是否处于全屏状态：
document.addEventListener('fullscreenchange', function () {
if (document.fullscreenElement) {
console.log('已进入全屏');
} else {
console.log('已退出全屏');
}
});注意：各浏览器前缀不同，需兼容：
-
fullscreenchange（标准） -
webkitfullscreenchange（Chrome/Safari） -
mozfullscreenchange（Firefox） -
MSFullscreenChange（IE）
注意事项与限制
全屏 API 使用有一些安全和体验上的限制：
- 必须由用户操作（如点击）触发，不能自动执行
- 某些浏览器会显示全屏提示栏，用户可手动退出
- 不支持跨 iframe 嵌套调用（除非设置允许）
- 移动端支持有限，部分浏览器不支持或行为不同
基本上就这些。掌握 Fullscreen API 后，你可以为视频播放、PPT 展示或小游戏添加沉浸式体验。虽然有浏览器兼容问题，但通过加前缀和判断基本可以覆盖主流环境。不复杂但容易忽略细节。
