必须用JavaScript调用requestFullscreen()且仅限用户手势触发，否则静默失败或抛NotAllowedError；需确保元素已挂载DOM、可见、非跨域iframe未授权、iOS上仅video或带allow="fullscreen"的iframe可用，并按标准→webkit→moz→ms顺序兼容调用。

不能靠 HTML 标签或纯 CSS 实现真正的浏览器全屏，必须用 JavaScript 调用 requestFullscreen()，且只能在用户点击、触摸等手势中触发——否则直接静默失败或抛 NotAllowedError。

为什么 requestFullscreen() 总是不生效

几乎全是上下文或状态问题，不是代码写错了：

• 调用不在用户手势里：比如放在 setTimeout、Promise.then、DOMContentLoaded 或 load 事件中，手势链已断
• 目标元素还没插入 DOM：document.getElementById('x') 拿到的是 null，或刚 new Element() 就调，没 appendChild
• 元素不可见：设置了 display: none、visibility: hidden，或被父容器 overflow: hidden 裁掉
• 跨 调用但没加 allow="fullscreen" 属性（如 ）
• iOS Safari 只允许 或带 allow="fullscreen" 的 全屏，普通
  无效

  怎么正确调用并兼容老浏览器

  现代浏览器支持 element.requestFullscreen()（返回 Promise），但旧版 Chrome/Safari/Firefox/IE 需前缀。别硬写死一个方法，要按顺序检测：

  • 先查 el.requestFullscreen（标准）
  • 再查 el.webkitRequestFullscreen（Safari、旧 Chrome）
  • 再查 el.mozRequestFullScreen（Firefox）
  • 最后查 el.msRequestFullscreen（IE11 / 旧 Edge）

  示例函数：

  

  HTML Text Extract

  从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

  下载

  function enterFullscreen(el) {
    if (el.requestFullscreen) {
      el.requestFullscreen().catch(err => console.error('全屏被拒:', err.message));
    } else if (el.webkitRequestFullscreen) {
      el.webkitRequestFullscreen();
    } else if (el.mozRequestFullScreen) {
      el.mozRequestFullScreen();
    } else if (el.msRequestFullscreen) {
      el.msRequestFullscreen();
    }
  }

  document.fullscreenElement 和 fullscreenchange 怎么用才可靠

  判断是否真进全屏，唯一可靠方式是读 document.fullscreenElement（注意拼写是 fullscreen，不是 fullScreen），并监听 document 上的 fullscreenchange 事件：

  • 监听必须绑在 document 上，不是触发元素本身
  • document.fullscreenElement === null 表示已退出；为 DOM 元素时表示当前全屏对象
  • 别自己维护布尔变量，状态变化异步且可能由 ESC、标签页切换等外部行为触发
  • Safari 旧版要用 webkitfullscreenchange 和 document.webkitFullscreenElement，建议加兼容层

  全屏后样式错乱？:fullscreen 伪类怎么写

  CSS 的 :fullscreen 是作用于**被调用 requestFullscreen() 的那个元素本身**，不是它的子元素或 body：

  • 必须带元素选择器，如 #player:fullscreen 或 video:fullscreen，不能只写 :fullscreen
  • 不要用 *:fullscreen —— 太宽泛，部分浏览器不识别
  • 不同浏览器支持略有差异：Safari 仍需 -webkit-full-screen，可并列写多条规则
  • 全屏时浏览器会重置默认 margin/background，建议显式设 margin: 0、width: 100vw、height: 100vh

  真正难的不是调用那行代码，而是处理 iOS Safari 的限制、iframe 的授权、以及退出后样式和状态的同步——这些点漏掉一个，用户就只会觉得“点了没反应”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！