HTML全屏切换实现方法【保姆级教程】

HTML全屏切换看似简单，实则暗藏诸多坑点：必须由用户点击等手势同步触发、目标元素需已挂载且可见、iframe需显式授权、iOS对video支持更可靠，而兼容旧浏览器还需层层fallback前缀；判断状态唯一可靠依据是document.fullscreenElement而非自定义变量，退出前必须严格校验该值并手动清理副作用——真正难点不在调用API，而在精准识别和应对那些“看似成功却未生效”或“UI已更新但底层状态滞留”的边界情况。

全屏切换功能不是加个属性就能用，必须由用户点击触发、正确判断状态、兼容旧浏览器，且退出逻辑不能只靠 ESC 键。

requestFullscreen() 为什么点了没反应

绝大多数“没反应”都是因为调用时机错了——requestFullscreen() 必须在用户手势（如 click、touchend）的同步上下文中执行，不能放在 setTimeout、Promise.then、DOMContentLoaded 或视频 play() 回调里。否则浏览器静默拒绝，控制台可能只报 NotAllowedError 或完全无提示。

• 确保目标元素已挂载 DOM 且可见（display: none 或 visibility: hidden 会导致失败）
• 若目标是