全屏功能失效主因是调用时机不当、目标元素未挂载、浏览器兼容性不足及事件监听错误；需确保 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"> <h3>SQL 编辑器全屏后光标错位或滚动异常？重置 CSS 与布局上下文</h3> <p>进入全屏时，浏览器会给元素加上 <code>: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 等）

  全屏模式本身不复杂，但跨浏览器 + 编辑器渲染 + 用户交互三者叠加后，任何一个环节的时机偏差都会让体验断掉——尤其是滚动位置丢失和退出后样式残留，这两个问题线上反馈最多，修起来也最花时间。