全屏功能失效主因是调用时机不当、目标元素未挂载、浏览器兼容性不足及事件监听错误；需确保 requestFullscreen 由用户点击直接触发、选对DOM元素、补全前缀、监听 document 的 fullscreenchange 并清理样式。
全屏按钮点击后界面没反应？检查 requestFullscreen 调用位置
浏览器的全屏 api 必须由用户手势（如 click）直接触发，不能放在异步回调、定时器或 promise.then 里。常见错误是把 element.requestfullscreen() 包在 settimeout 或请求完成后的逻辑中，这时浏览器会静默拒绝。
- 确保绑定在原生
click事件处理器里，且不经过中间函数转发（比如不要用onClick={handleClick}再调用异步函数） - 目标元素必须已挂载到 DOM，React/Vue 中别在
useEffect或mounted之前就调用 - 注意：
document.documentElement和document.body在部分浏览器（如 Safari）下不支持全屏，优先选包裹 SQL 编辑器的<div id="editor-container">
SQL 编辑器全屏后光标错位或滚动异常？重置 CSS 与布局上下文
进入全屏时，浏览器会给元素加上 :fullscreen 伪类，但更关键的是它会临时修改根元素样式（比如 overflow: hidden），这容易干扰 Monaco Editor、CodeMirror 等编辑器的滚动容器计算。
- 全屏前主动保存编辑器当前滚动位置（
editor.getScrollTop()），全屏后用editor.setScrollTop()恢复 - 给全屏容器加
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999;，避免被其他定位元素干扰 - 禁用全屏状态下的
body滚动：监听fullscreenchange事件，在进入时设document.body.style.overflow = 'hidden'，退出时还原
退出全屏后编辑器宽度没恢复？监听 fullscreenchange 别漏掉 document
很多人只监听了目标容器的 fullscreenchange，但该事件实际只在 document 上触发。漏监听会导致状态不同步，UI 以为还在全屏，CSS 类没清除，宽度卡死。
- 统一监听
document.addEventListener('fullscreenchange', handler)，不要监听container.addEventListener - 通过
document.fullscreenElement判断当前是否处于全屏（注意拼写是fullscreen，不是fullScreen或full-screen） - 退出时记得清理内联样式：
container.style.width = ''、container.style.height = ''，否则 React/Vue 的样式管理可能不生效
Firefox 下点按钮报错 “requestFullScreen is not a function”？补全浏览器前缀和兼容判断
Firefox 早年用 requestFullScreen（大写 S），Chrome/Edge 早期用 webkitRequestFullscreen，现在虽已标准化，但旧版仍在线上运行。不加兼容处理，按钮在 Firefox 68 以下或某些企业内网环境直接失效。
- 别直接调
el.requestFullscreen()，先做能力检测： const requestMethod = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen || el.msRequestFullscreen;- 调用前加判空：
if (requestMethod) requestMethod.call(el); - 同理，退出全屏要用
document.exitFullscreen()及其对应前缀版本（mozCancelFullScreen等）
全屏模式本身不复杂，但跨浏览器 + 编辑器渲染 + 用户交互三者叠加后，任何一个环节的时机偏差都会让体验断掉——尤其是滚动位置丢失和退出后样式残留，这两个问题线上反馈最多，修起来也最花时间。
