HTML5全屏API核心是通过requestFullscreen()让指定元素原生全屏，必须由用户手势（如click）同步触发；整页全屏用document.documentElement.requestFullscreen()；退出需exitFullscreen()并监听fullscreenchange事件。
HTML5 全屏 API 的核心是让指定元素（比如一个 div、video 或 canvas）真正占据用户整个屏幕，实现沉浸式体验。它不是靠 CSS 拉伸模拟，而是调用浏览器原生全屏能力，会隐藏地址栏、工具栏等 UI —— 但必须由用户主动触发，不能自动执行。
必须由用户手势触发
这是最关键的限制。requestFullscreen() 只能在 click、touchend、keydown（如按空格）等用户直接交互的同步回调中调用。以下情况会失败：
- 在页面加载完成时（window.onload 或 Vue mounted 钩子里）直接调用
- 放在 setTimeout、Promise.then 或异步请求回调里
- 按钮绑定了防抖/节流后，再调用 requestFullscreen（可能中断手势链）
- 目标元素当前 display: none、visibility: hidden 或未渲染完成
让某个元素进入全屏
以 id="player" 的容器为例，点击按钮触发：
const elem = document.getElementById("player");
const btn = document.getElementById("fullscreenBtn");
<p>btn.addEventListener("click", () => {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
});注意：现代浏览器基本支持标准 requestFullscreen()，前缀主要用于兼容较老版本（如 IE11、旧版 Safari/Firefox）。
立即学习“前端免费学习笔记（深入）”；
让整个页面“全屏”显示
HTML5 没有专门的“整页全屏”接口，但可以用 document.documentElement 调用：
document.documentElement.requestFullscreen();
效果和用户按 F11 键一致——浏览器标签页内容区铺满屏幕（不含浏览器 UI）。这种方式适合演示页、数据看板等需要最大化可视区域的场景。
退出全屏与状态监听
退出必须同样由用户手势触发（例如再点一次按钮），不能自动调用：
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}用 document.fullscreenElement 判断当前是否处于全屏：
if (document.fullscreenElement) {
// 正在全屏，可更新按钮文字为“退出全屏”
} else {
// 非全屏状态
}推荐监听 fullscreenchange 事件统一处理状态切换：
document.addEventListener("fullscreenchange", () => {
const isFull = !!document.fullscreenElement;
// 更新 UI、重设布局、暂停动画等
});另外，建议配合 CSS :fullscreen 伪类优化样式，例如：
#player:fullscreen {
width: 100vw;
height: 100vh;
object-fit: contain;
}
/* 兼容旧版 */
#player:-webkit-full-screen { width: 100vw; }
#player:-moz-full-screen { width: 100vw; }
#player:-ms-fullscreen { width: 100vw; }iframe 和安全上下文注意事项
如果目标元素是 iframe 内的内容，需确保 iframe 标签加了 allow="fullscreen" 属性：
<iframe src="content.html" allow="fullscreen"></iframe>
跨域 iframe 还需服务端返回正确的 CORS 头。另外，全屏 API 在非 HTTPS 环境下部分浏览器（如 Chrome）可能禁用，建议部署在安全上下文中。
