全屏api必须由用户手势触发，需兼容多浏览器前缀，注意全屏后样式与交互变化，并监听fullscreenchange事件同步状态。
全屏 API 调用必须由用户手势触发
浏览器明确禁止脚本自动进入全屏，requestFullscreen() 必须在 click、keydown（且有按键输入）等用户可感知的操作回调中调用，否则直接静默失败或抛出 NotAllowedError。
- 常见错误现象：
requestFullscreen()无报错但页面没反应，或控制台出现Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture. - 正确做法：只在按钮
onclick或表单提交的onsubmit回调里调用，避免放在setTimeout、load事件或异步加载完成钩子中 - 移动端注意：ios safari 对手势要求更严，
touchend有时不被认可，优先用click
不同浏览器的全屏方法和事件名不统一
虽然现代浏览器基本支持标准 requestFullscreen()，但老版本 chrome/Safari/edge 仍依赖带前缀的方法，监听退出事件也要对应匹配。
- 调用时建议兼容写法：
function launchFullscreen(element) { if (element.requestFullscreen) { element.requestFullscreen(); } else if (element.webkitRequestFullscreen) { element.webkitRequestFullscreen(); } else if (element.msRequestFullscreen) { element.msRequestFullscreen(); } } - 监听退出事件要用对应前缀：
fullscreenchange（标准）、webkitfullscreenchange、msfullscreenchange；注意它们都触发在document上，不是目标元素 - 不要混用：比如用
webkitRequestFullscreen()启动，却只监听fullscreenchange，会导致退出逻辑丢失
全屏后样式和交互行为会突变
进入全屏不是单纯放大视口，而是创建一个独立的全屏上下文，CSS 和焦点行为都会变化，容易引发布局错乱或键盘失灵。
- 常见问题：全屏后
input失去焦点、tabindex失效、固定定位元素偏移、滚动条消失导致内容被截 - 关键修复点：用
:fullscreen伪类重置关键样式，例如video:fullscreen { width: 100vw !important; height: 100vh !important; } :fullscreen ::-webkit-scrollbar { display: none; } - 键盘响应：全屏下部分浏览器（如 firefox）默认禁用
Esc以外的快捷键，需确保关键操作（如播放/暂停）绑定到keydown并检查Event.target是否为可交互元素
退出全屏不能只靠 Esc，得提供显式按钮并手动处理状态
document.exitFullscreen() 是唯一标准退出方式，但用户按 Esc 不会触发你的 js 逻辑，状态同步全靠监听事件，稍不注意就出现“ui 显示已退出，实际还在全屏”这种错位。
立即学习“前端免费学习笔记（深入）”；
- 必须监听
fullscreenchange并检查document.fullscreenElement（注意拼写是fullscreen，不是fullScreen） - 退出按钮要主动调用
document.exitFullscreen()，而不是只改 UI 状态；否则用户从外部退出（如 Alt+Tab 切走再切回），你的按钮状态就不同步 - 注意兼容性：旧版 IE 用
document.msExitFullscreen()，Safari 用document.webkitExitFullscreen()，标准方法在不支持时返回promise<void></void>，但低版本返回undefined，建议加空判断
全屏切换看着简单，真正卡住人的地方往往不是调用语法，而是手势时机判断不准、退出状态没对齐、或者 CSS 在 :fullscreen 下漏写了关键重置规则。这几个点漏一个，就容易在某个浏览器或某种操作路径下突然失效。