HTML5全屏API怎么调用_网页全屏切换操作教程【操作】

全屏api必须由用户手势触发，需兼容多浏览器前缀，注意全屏后样式与交互变化，并监听fullscreenchange事件同步状态。

全屏 API 调用必须由用户手势触发

浏览器明确禁止脚本自动进入全屏，requestFullscreen() 必须在 click、keydown（且有按键输入）等用户可感知的操作回调中调用，否则直接静默失败或抛出 NotAllowedError。

• 常见错误现象：requestFullscreen() 无报错但页面没反应，或控制台出现 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
• 正确做法：只在按钮 onclick 或表单提交的 onsubmit 回调里调用，避免放在 setTimeout、load 事件或异步加载完成钩子中
• 移动端注意：iOS Safari 对手势要求更严，touchend 有时不被认可，优先用 click

不同浏览器的全屏方法和事件名不统一

虽然现代浏览器基本支持标准 requestFullscreen()，但老版本 Chrome/Safari/Edge 仍依赖带前缀的方法，监听退出事件也要对应匹配。

• 调用时建议兼容写法：

  function launchFullscreen(element) {
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullscreen) {
      element.webkitRequestFullscreen();
    } else if (element.msRequestFullscreen) {
      element.msRequestFullscreen();
    }
  }

• 监听退出事件要用对应前缀：fullscreenchange（标准）、webkitfullscreenchange、msfullscreenchange；注意它们都触发在 document 上，不是目标元素
• 不要混用：比如用 webkitRequestFullscreen() 启动，却只监听 fullscreenchange，会导致退出逻辑丢失

全屏后样式和交互行为会突变

进入全屏不是单纯放大视口，而是创建一个独立的全屏上下文，CSS 和焦点行为都会变化，容易引发布局错乱或键盘失灵。

LM Studio

LM Studio 是一个桌面应用程序，可以在本地计算机上运行 LLM大语言模型。

下载

• 常见问题：全屏后 input 失去焦点、tabindex 失效、固定定位元素偏移、滚动条消失导致内容被截
• 关键修复点：用 :fullscreen 伪类重置关键样式，例如

  video:fullscreen {
    width: 100vw !important;
    height: 100vh !important;
  }
  :fullscreen ::-webkit-scrollbar {
    display: none;
  }

• 键盘响应：全屏下部分浏览器（如 Firefox）默认禁用 Esc 以外的快捷键，需确保关键操作（如播放/暂停）绑定到 keydown 并检查 event.target 是否为可交互元素

退出全屏不能只靠 Esc，得提供显式按钮并手动处理状态

document.exitFullscreen() 是唯一标准退出方式，但用户按 Esc 不会触发你的 JS 逻辑，状态同步全靠监听事件，稍不注意就出现“UI 显示已退出，实际还在全屏”这种错位。

立即学习“前端免费学习笔记（深入）”；

• 必须监听 fullscreenchange 并检查 document.fullscreenElement（注意拼写是 fullscreen，不是 fullScreen）
• 退出按钮要主动调用 document.exitFullscreen()，而不是只改 UI 状态；否则用户从外部退出（如 Alt+Tab 切走再切回），你的按钮状态就不同步
• 注意兼容性：旧版 IE 用 document.msExitFullscreen()，Safari 用 document.webkitExitFullscreen()，标准方法在不支持时返回 Promise<void></void>，但低版本返回 undefined，建议加空判断