HTML无全屏能力，需用JavaScript的requestFullscreen()方法（用户手势触发）配合:fullscreen伪类控制样式，调用返回Promise需捕获错误，退出靠fullscreenchange事件和document.fullscreenElement判断。
HTML 本身没有“全屏显示”能力，真正起作用的是 JavaScript 的 requestFullscreen() 方法，配合 CSS 的 :fullscreen 伪类控制样式。
如何用 requestFullscreen() 触发全屏
必须由用户手势（如点击）触发，不能自动调用，否则浏览器会静默拒绝：
- 直接对某个元素调用：
document.getElementById('myDiv').requestFullscreen() - 对
document调用是旧写法（已废弃），应避免：document.documentElement.requestFullscreen()是当前标准写法 - 注意兼容性前缀：Chrome/Edge 用
webkitRequestFullscreen，Firefox 用mozRequestFullScreen，但现代浏览器基本支持无前缀版本 - 调用后返回 Promise，建议加
.catch(e => console.error('全屏失败:', e))捕获拒绝原因（比如非用户触发、iframe 未设allow="fullscreen"）
全屏状态下如何调整样式
进入全屏后，目标元素会获得浏览器自动添加的 :fullscreen 伪类（注意不是 ::fullscreen），可用于覆盖布局：
- 常见需求是撑满整个屏幕：
div:fullscreen { width: 100vw; height: 100vh; margin: 0; } - 隐藏滚动条：
div:fullscreen { overflow: hidden; } - 注意不同浏览器对伪类名称支持略有差异：Safari 仍需
:-webkit-full-screen，Firefox 支持:fullscreen，可并列写多条规则 - 不要依赖
body:fullscreen—— 实际被全屏的是你调用requestFullscreen()的那个元素，不是 body
退出全屏与状态监听
退出方式不止一种，且状态变化需主动监听：
立即学习“前端免费学习笔记（深入）”；
- 用户按
ESC键、调用document.exitFullscreen()、或切换标签页都可能退出全屏 - 监听事件用
document.addEventListener('fullscreenchange', handler)，而非fullscreenend（后者不被所有浏览器支持） - 在 handler 中通过
document.fullscreenElement判断当前是否有元素处于全屏：if (document.fullscreenElement === null) { /* 已退出 */ } -
document.fullscreenElement返回被全屏的 DOM 元素，为null表示未全屏 —— 这是唯一可靠的判断依据，别用布尔值变量自己维护状态
全屏 API 的行为高度依赖上下文：iframe 需显式声明 allow="fullscreen"，移动端多数浏览器不支持（或仅支持视频元素），而 requestFullscreen() 被拒时不会抛异常，只拒绝 Promise —— 容易漏掉错误处理，导致“点了没反应”却查不出原因。
