document.fullscreenelement 是只读属性，返回当前全屏的 element 对象或 null；正确判断应显式比较 !== null，而非仅用真值判断，且需注意触发条件、dom 状态、shadow dom 及 iframe 权限等限制。
document.fullscreenElement 是什么，它返回什么值
document.fullscreenElement 是一个只读属性，用于检测当前文档中是否有元素处于原生全屏状态。它不返回布尔值，而是返回：当前全屏的 Element 对象，或者 null（无全屏元素时）。
注意：它不会返回 true/false，所以不能直接 if (document.fullscreenElement) 就认为“有全屏”——虽然这个判断在逻辑上可行，但容易掩盖类型误用问题；更稳妥的是显式比对 null。
如何正确判断是否有元素处于全屏
最可靠、跨浏览器（Chrome/Firefox/Safari/Edge）的写法是：
if (document.fullscreenElement !== null) {
console.log('有元素正在全屏');
} else {
console.log('没有元素处于全屏');
}
常见错误写法包括：
- 误用
document.webkitIsFullScreen或document.mozFullScreen—— 这些已废弃，现代浏览器不保证可用 - 只检查
document.fullscreenElement是否为真值（如if (document.fullscreenElement)），虽能运行，但在调试时可能掩盖undefined等异常情况 - 在 iframe 中调用却未设置
allow="fullscreen"属性，导致始终返回null，即使父页面已全屏
为什么有时 document.fullscreenElement 总是 null
几个高频原因：
- 页面未通过用户手势（如 click、tap）触发
element.requestFullscreen()—— 浏览器禁止静默进入全屏 - 目标元素被设为
display: none或未挂载到 DOM，requestFullscreen()调用会失败且不抛错，后续fullscreenElement仍为null - 使用了 Shadow DOM，而目标元素在 shadow root 内部：需从对应 shadow root 上访问
fullscreenElement，而非document - Safari 15.4+ 对
<video></video>全屏有特殊限制：仅当playsinline未启用、且用户交互触发时才允许，否则fullscreenElement不更新
兼容性与 polyfill 注意点
主流浏览器均支持 document.fullscreenElement（含移动端 Chrome/Safari），但前缀版本（webkitFullscreenElement、mozFullScreenElement）已无需主动处理，除非需支持 IE 或极老 Android WebView。
若你封装了全屏工具函数，建议这样写：
function isFullscreen() {
return document.fullscreenElement !== null ||
document.webkitFullscreenElement !== null ||
document.mozFullScreenElement !== null ||
document.msFullscreenElement !== null;
}
不过要注意：多个前缀同时存在时（如旧版 Edge），它们可能不同步，优先以标准属性为准；实际项目中，只要不刻意降级到 iOS 12 以下或 Android 4.x，单用 document.fullscreenElement 就足够。
真正容易被忽略的是事件监听时机：不要依赖 fullscreenchange 事件触发后立刻读取 fullscreenElement，某些 Safari 版本存在微小延迟，建议加一层 requestAnimationFrame 保险读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
