全屏切换与元素显隐是两套独立机制：按钮仅触发requestFullscreen()，显隐需手动控制CSS类或样式；须监听fullscreenchange事件并检查fullscreenElement来同步状态，注意兼容性与权限限制。
全屏切换按钮本身不控制元素显示状态，它只触发浏览器全屏 API；真正控制元素显隐的是 display、visibility 或 CSS 类切换逻辑——这两件事常被混为一谈，但必须分开处理。
全屏切换和元素显隐是两套独立机制
点击“全屏”按钮时，你可能想让某个容器撑满屏幕，同时隐藏导航栏、侧边栏等干扰 UI。但 requestFullscreen() 只会让目标元素占据整个屏幕，并不会自动修改其他元素的 display 或 visibility。如果你没手动干预，那些元素依然在 DOM 中、仍占布局空间、甚至可能遮挡内容。
- 全屏 API 作用对象是 DOM 元素（如
document.documentElement或某个<div id="player">），它只改变渲染层的尺寸和层级，不改样式属性 - 元素显隐需额外用 JS 控制：比如给
<header>加style.display = 'none'，或切换hidden类 - 退出全屏时，这些显隐状态不会自动恢复，必须监听
fullscreenchange事件手动还原
用 classList.toggle() 管理显隐状态最可靠
比起反复写 element.style.display = 'block' / 'none'，用 CSS 类配合 classList.toggle() 更可控、易维护，也避免内联样式污染。
- 先定义 CSS：
.hidden { display: none !important; } - 绑定按钮点击时，同时做两件事：
targetElement.requestFullscreen()+document.querySelector('header').classList.add('hidden') - 监听
document.addEventListener('fullscreenchange', () => { ... })，在退出时移除hidden类 - 注意：不要在全屏进入后立即操作 DOM，部分浏览器会延迟触发
fullscreenchange，建议加个setTimeout微任务缓冲（16ms 足够）
fullscreenchange 事件里怎么判断当前状态
不能只靠 document.fullscreen 布尔值，它在 Safari 16.4+ 之前返回 undefined，且退出全屏时该值可能滞后于事件触发时机。
立即学习“前端免费学习笔记（深入）”；
- 正确做法是检查
document.fullscreenElement是否为null：document.addEventListener('fullscreenchange', () => { if (document.fullscreenElement === null) { // 已退出全屏，恢复 header、sidebar 等 document.querySelector('header').classList.remove('hidden'); } else { // 进入全屏，隐藏非核心区域 document.querySelector('header').classList.add('hidden'); } }); - 别用
document.webkitIsFullScreen或document.msFullscreenElement—— 这些已废弃，现代浏览器统一用fullscreenElement - 移动端 Safari 不支持任意元素全屏（只允许
<video>），此时requestFullscreen()会静默失败，fullscreenchange也不会触发，得提前检测并降级处理
容易被忽略的兼容性与权限细节
全屏必须由用户手势触发（如 click、touchend），且页面需运行在 HTTPS 或 localhost 上，否则 requestFullscreen() 会直接抛出 SecurityError。
- 错误信息
Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture意味着你试图在定时器、fetch 回调或load事件里调用，必须挪到 click handler 内 - Chrome 95+ 和 Firefox 91+ 已移除所有前缀（
webkitRequestFullScreen等），只保留标准requestFullscreen()；但旧版 Android WebView 仍需 fallback - 如果目标元素是 iframe，需确保其
allow="fullscreen"属性存在，否则全屏请求会被拒绝
真正麻烦的不是调用 API，而是同步管理全屏状态与 UI 显隐的生命周期——尤其是退出时忘记还原、移动端无响应、或者多个全屏入口状态不同步。这些细节不写进事件监听里，光靠按钮点击根本不可靠。
