应结合存在性与值判断：存在且为true→支持可用；存在但为false→支持但被禁用；undefined→完全不支持。iframe需加allow="fullscreen"，调用需在用户手势中并检查Promise错误。
如何正确检测浏览器是否支持全屏 API
直接读取 document.fullscreenEnabled 是最常用方式，但它在不支持全屏或被禁用时返回 false，**不能区分“不支持”和“支持但被禁用”**。更稳妥的做法是结合属性存在性与值判断：
-
document.fullscreenEnabled存在且为true→ 支持且可用 -
document.fullscreenEnabled存在但为false→ 支持但被策略禁用（如 iframe 缺少allow="fullscreen"） -
document.fullscreenEnabled为undefined或typeof document.fullscreenEnabled === 'undefined'→ 完全不支持（如旧版 Safari 或 IE）
注意：Chrome、Firefox、Edge 均已统一使用标准名 fullscreenEnabled；无需再检查 webkitFullscreenEnabled 等前缀属性。
iframe 中 fullscreenEnabled 返回 false 的原因
即使浏览器本身支持全屏，嵌入的 iframe 默认被禁止调用全屏 API。此时 document.fullscreenEnabled 会返回 false，不是 bug，而是安全策略。
- 必须在
iframe标签中显式添加allow="fullscreen"属性 - 若使用动态创建的
iframe，需在src设置前就写入该属性：<iframe src="page.html" allow="fullscreen"></iframe>
- 仅设置
allowfullscreen（无值）在部分旧环境可能失效，推荐写完整形式allow="fullscreen"
为什么调用 element.requestFullscreen() 后 fullscreenEnabled 仍是 false
这不是检测时机问题，而是调用未成功触发。常见原因有：
立即学习“前端免费学习笔记（深入）”；
- 调用不在用户手势事件（如
click、keydown）回调中 → 浏览器静默拒绝 - 目标元素不可见（
display: none、visibility: hidden或未插入 DOM） - 目标元素是
<iframe>且其自身未声明allow="fullscreen" - 页面处于非活跃标签页（部分浏览器限制后台标签页进入全屏）
务必检查 requestFullscreen() 返回的 Promise 是否 reject，并捕获错误信息：
el.requestFullscreen().catch(err => {
console.error('Fullscreen request failed:', err.name, err.message);
});
兼容性与 polyfill 的实际价值
现代浏览器（Chrome 71+、Firefox 64+、Edge 79+、Safari 12.1+）均已原生支持标准全屏 API，document.fullscreenEnabled 可靠可用。所谓“兼容旧版”的 polyfill（如 screenfull.js）现在主要解决两件事：
- 自动补全前缀（
webkitRequestFullscreen、msRequestFullscreen），但这些前缀在当前主流版本中早已废弃 - 封装状态监听（
fullscreenchange、fullscreenerror）事件绑定逻辑，减少样板代码
如果你只需检测能力，**不需要引入任何库** —— 直接查 document.fullscreenEnabled 就够了。真正容易被忽略的是：全屏能力可能被企业策略、浏览器扩展或内容安全策略（CSP）中的 fullscreen 指令禁用，这时 fullscreenEnabled 就是 false，且无法绕过。
