应封装兼容性函数统一调用全屏api：优先标准方法，再fallback前缀版本；调用前检查document.fullscreenenabled；必须由用户手势触发；监听fullscreenchange事件响应状态变化。
处理全屏 API 的浏览器前缀差异，核心是不硬写多个 if-else，而是用统一方式检测并调用可用方法，同时确保触发条件合规。
识别并封装兼容性调用逻辑
现代浏览器已普遍支持无前缀的 requestFullscreen 和 exitFullscreen，但旧版 Chrome（≤69）、Firefox（≤63）、IE11 仍依赖前缀。直接逐个判断容易出错，建议封装一个通用函数：
- 优先查标准方法：
element.requestFullscreen - 依次 fallback 到：
element.webkitRequestFullscreen、element.mozRequestFullScreen、element.msRequestFullscreen - 对退出操作同理：先
document.exitFullscreen，再 fallback 到webkitExitFullscreen、mozCancelFullScreen、msExitFullscreen - 注意 Safari 对
<video></video>元素有特殊支持：webkitEnterFullscreen可用于原生视频控件全屏（仅限 Safari）
检查是否支持全屏能力再执行
不能假定所有浏览器都支持，应在调用前做基础判断：
- 用
document.fullscreenEnabled（或 fallback 到document.webkitFullscreenEnabled等）确认当前环境允许全屏 - 若返回
false，说明被禁用（如页面在 iframe 中且未设allow="fullscreen"）或不支持 - 避免静默失败：调用后加
catch捕获拒绝错误，比如用户未点击触发、HTTPS 缺失、或策略限制
绑定在用户手势上，避开异步陷阱
全屏必须由明确的用户交互启动，否则会被浏览器拦截：
- ✅ 正确写法：
button.addEventListener('click', () => elem.requestFullscreen()) - ❌ 错误写法：
setTimeout(() => elem.requestFullscreen(), 100)、fetch().then(() => elem.requestFullscreen()) - ⚠️ Safari 更严格：即使 click 绑定，若 video 尚未加载完成或未设置
playsinline，也可能拒绝请求
监听状态变化并更新 UI
全屏进入/退出是异步过程，需靠事件响应：
- 监听
document.addEventListener('fullscreenchange', handler)（标准） - 兼容写法可同时监听
webkitfullscreenchange、mozfullscreenchange、msfullscreenchange - 在回调中通过
document.fullscreenElement判断当前全屏元素，进而切换按钮图标、隐藏工具栏等 - 注意：退出时该值为
null，可据此还原界面
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
