全屏API需用户手势触发，调用requestFullscreen并处理浏览器前缀；通过document.fullscreenElement判断状态，监听fullscreenchange事件更新UI；退出用document.exitFullscreen及兼容方案；注意移动端Safari限制与交互细节。
全屏 API 的基本调用方式（requestFullscreen）
现代浏览器中，让网页元素全屏显示必须通过 Element.requestFullscreen() 触发，且只能由用户手势（如点击）发起。直接调用会失败，控制台报错 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.。
实操建议：
- 绑定到按钮的
click事件，不能放在load或定时器里 - 推荐作用于
document.documentElement（即<html>元素），这样是整个页面全屏；也可传入某个<div>实现局部全屏 - 需处理浏览器前缀：Chrome/Safari 用
webkitRequestFullscreen，Firefox 用mozRequestFullScreen，IE11 用msRequestFullscreen
const btn = document.getElementById('fullscreen-btn');
btn.addEventListener('click', () => {
const elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
});
如何判断是否已进入全屏状态（document.fullscreenElement）
全屏不是布尔开关，而是通过 document.fullscreenElement 判断当前是否有元素处于全屏——它返回该元素引用，为 null 表示未全屏。不要用 document.isFullscreen（已废弃）或检查 document.fullscreen（只读布尔值，不推荐依赖）。
常见错误现象：按钮点击后无反应，但控制台没报错 → 很可能漏了状态判断逻辑，导致重复调用失败或 UI 同步出错。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 监听
fullscreenchange事件统一更新按钮文案或图标 - 在事件回调里检查
document.fullscreenElement是否为null，再决定启用/禁用按钮 - 退出全屏应调用
document.exitFullscreen()（同样有前缀），而非再次调用requestFullscreen
退出全屏与兼容性注意事项
document.exitFullscreen() 是标准退出方法，但旧版 Safari（≤15.4）不支持，需 fallback 到 document.webkitExitFullscreen()；Firefox 和 Edge 已全面支持标准 API。
容易踩的坑：
- 调用
exitFullscreen()前未检查是否已在全屏状态，会触发TypeError: Document not full screen - 移动端 Safari 对全屏支持有限：无法真正隐藏地址栏和工具栏，
requestFullscreen可能静默失败，且无fullscreenchange事件 - CSS 中
:fullscreen伪类可用于样式定制，但 IE 完全不支持，Safari 需加:-webkit-full-screen
按钮交互与用户体验细节
用户点一次进全屏，再点一次退出，这是最自然的交互。但实现时容易忽略状态同步和防抖。
实操建议：
- 按钮文字应动态切换，例如从「全屏」变为「退出全屏」，依据
document.fullscreenElement实时更新 - 避免连续快速点击：可在进入全屏后立即将按钮
disabled，并在fullscreenchange事件中恢复 - 全屏后键盘焦点可能丢失，尤其在 iframe 内嵌场景下，可手动
elem.focus()保证可访问性 - 部分浏览器（如 Chrome）在全屏模式下禁用右键菜单和 F12，属正常行为，无需额外拦截
真正麻烦的是移动端适配和 Safari 的行为差异——它不抛异常也不生效，只默默忽略，得靠特征检测 + 用户提示兜底。
