现代浏览器统一支持requestFullscreen()，需用户手势触发且目标元素在DOM中可渲染；通过document.fullscreenElement检测状态，监听fullscreenchange事件响应切换；退出时先判空再调用exitFullscreen()并捕获错误。
如何用 requestFullscreen 触发全屏（现代浏览器）
主流浏览器（Chrome、Firefox、Edge、Safari 15.4+）已统一支持标准的 requestFullscreen 方法，不再需要带前缀的旧 API。调用前必须满足两个硬性条件：用户手势触发（如 click）、目标元素在 DOM 中且可渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮绑定
click事件，调用目标容器（如<main>或<div id="app">）的requestFullscreen() - 务必检查返回的 Promise：失败时捕获
error，常见原因是未由用户操作触发或元素不可见 - 不要对
document.body或document.documentElement直接调用——部分浏览器（如 Safari）会拒绝
const container = document.getElementById('app');
button.addEventListener('click', () => {
container.requestFullscreen()
.catch(e => console.error('全屏失败:', e.name)); // e.name 可能是 'NotAllowedError'
});
如何检测和响应全屏状态变化
全屏是全局状态，切换成功与否、退出全屏，都会触发 fullscreenchange 事件，但该事件只在 document 上监听有效，且不携带目标元素信息。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 监听
document.addEventListener('fullscreenchange', ...)，通过document.fullscreenElement判断当前哪个元素处于全屏 - 注意：退出全屏时
document.fullscreenElement为null，不是undefined - 避免重复绑定——组件卸载或按钮销毁时记得
removeEventListener - Safari 对
fullscreenchange的触发时机稍滞后，建议加微任务延迟读取状态
function handleFullscreenChange() {
if (document.fullscreenElement === container) {
button.textContent = '退出全屏';
} else {
button.textContent = '全屏显示';
}
}
document.addEventListener('fullscreenchange', handleFullscreenChange);
如何安全退出全屏（兼容所有情况）
退出全屏不能只靠 document.exitFullscreen()，因为该方法只在有全屏元素时才有效；若当前未全屏却调用，会抛出错误（NotFoundError），但不会中断脚本。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 先判断
document.fullscreenElement是否存在，再决定是否调用exitFullscreen() - 始终用
try/catch包裹exitFullscreen()，尤其在用户频繁点击按钮的场景下 - 不要依赖
document.cancelFullScreen()等废弃方法——它们在新版 Chrome/Firefox 中已彻底移除
if (document.fullscreenElement) {
document.exitFullscreen().catch(e => {
// e.name === 'NotFoundError' 表示已退出，可忽略
});
}
按钮 UI 同步与样式适配要点
全屏本身不改变页面结构，但 viewport 尺寸突变，常导致按钮位置错乱、文字被裁剪，或因 CSS position: fixed 在全屏下行为异常。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给全屏容器加
width: 100vw; height: 100vh;，避免内容溢出或留白 - 按钮使用
position: absolute+z-index定位，比fixed更可控 - 监听
resize事件仅作兜底——真正可靠的同步方式仍是fullscreenchange - 移动端 Safari 不支持网页全屏（仅视频等原生控件可），按钮应自动隐藏或置灰
容易被忽略的是：全屏后滚动条消失，但 body 的 overflow 仍可能影响内部布局；建议在进入全屏时临时设置 document.body.style.overflow = 'hidden'，退出时恢复。
