全屏是浏览器创建独立上下文，需文档结构响应式管理状态；requestfullscreen()前须检查document.fullscreenenabled，https为硬性前提；监听fullscreenchange事件必须绑定document，退出需调用document.exitfullscreen()并处理promise。
全屏不是“把元素撑满屏幕”，而是浏览器创建一个独立的全屏上下文；文档结构必须配合这个上下文做响应式状态管理，否则退出时必然丢状态、错样式。
requestFullscreen() 调用前必须检查 document.fullscreenEnabled
很多失败根本没走到 requestFullscreen() 那步——因为页面跑在 HTTP、iframe 里没加 allow="fullscreen"，或 WebView 不支持。直接读 document.fullscreenEnabled 最可靠：
-
document.fullscreenEnabled为false时，requestFullscreen()必定静默失败或抛TypeError - 不要只查
document.webkitFullscreenEnabled等前缀变体，现代浏览器已统一支持标准属性 - HTTPS 是硬性前提：HTTP 页面下该值恒为
false，连 Safari 17+ 也拒绝启用
监听 fullscreenchange 事件必须绑定到 document 上
事件只在 document 上触发，且大小写敏感：fullscreenchange，不是 fullscreenChange 或 onfullscreenchange。常见错误是绑在目标元素上白监听：
- 进入/退出都走同一个事件，靠
document.fullscreenElement === null判断状态，别用==或真值判断 - 旧版 Safari 需额外监听
webkitfullscreenchange，但现代 Safari 15.4+ 已支持标准事件 - 别漏掉
fullscreenerror事件——用户按 Esc 拒绝、弹窗拦截器拦截、或跨域 iframe 被拒时会触发
:fullscreen 伪类只作用于当前全屏元素本身
CSS 的 :fullscreen 不是全局开关，它只匹配正在全屏的那个 DOM 节点，而且不继承、不链式生效：
- 写成
#viewer:fullscreen或video:fullscreen才有效；.container:fullscreen .content在 Chrome/Firefox 下可能失效 - 退出后
vh单位会因地址栏显示而跳变，改用min-height: 100dvh更稳 - 全屏时浏览器重置默认 margin/background，建议显式设
body { margin: 0; }和#viewer:fullscreen { width: 100vw; height: 100vh; }
exitFullscreen() 必须由用户手势触发，且只能调用 document 上的方法
退出不是“取消全屏”，而是主动调用 document.exitFullscreen()。它和进入一样受用户交互限制：
-
document.exitFullscreen()返回 Promise，需.catch()处理拒绝（比如用户已手动退出） - 不能对元素调用
el.exitFullscreen()——该方法不存在，只有document上有 - 移动端 Safari 退出后常留黑边，得手动
window.scrollTo(0, 0)并延迟重设body.style.height
真正难的不是进全屏，而是退回来那一刻——DOM 结构没重置、CSS 状态没清理、滚动位置没恢复，所有这些都得在 fullscreenchange 里同步处理，而不是依赖伪类或定时器。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
