HTML5提供requestFullscreen API实现元素级全屏，需用户交互触发并兼容前缀；F11键可触发浏览器级全屏，无需脚本且不可被干预；:fullscreen伪类仅对API全屏生效，用于定制样式；退出全屏须匹配进入方式，API全屏用exitFullscreen()，F11全屏只能手动退出。
如果您希望在网页中实现全屏显示效果，HTML5 提供了标准的 requestFullscreen API 用于程序化触发全屏，同时用户也可通过键盘快捷键 F11 手动进入浏览器全屏模式。以下是两种不同路径的具体操作方式：
一、使用 requestFullscreen API 实现元素级全屏
requestFullscreen API 允许指定 DOM 元素（如 <div>、<video> 或 <canvas>）进入全屏状态，该方法需在用户交互（如点击、按键）回调中调用，且受浏览器安全策略限制。
1、获取目标元素，例如：document.getElementById('myVideo')。
2、调用该元素的 requestFullscreen 方法，注意兼容各浏览器前缀：element.requestFullscreen()、element.webkitRequestFullscreen()、element.mozRequestFullScreen()、element.msRequestFullscreen()。
立即学习“前端免费学习笔记（深入）”；
3、为避免报错，应先检测方法是否存在，再执行调用，例如：if (element.requestFullscreen) { element.requestFullscreen(); }。
4、监听 fullscreenchange 事件以响应全屏状态切换，例如：document.addEventListener('fullscreenchange', handler)。
二、通过 F11 键触发浏览器级全屏
F11 是操作系统与浏览器共同支持的全局快捷键，可将整个浏览器窗口切换至无边框全屏模式，不依赖任何 JavaScript 代码，也不作用于特定元素，属于用户主动控制行为。
1、在网页任意焦点状态下，直接按下键盘上的 F11 键。
2、若当前处于全屏状态，再次按 F11 键 即可退出全屏。
3、部分笔记本电脑需配合 Fn 键 使用，例如：Fn + F11。
4、该方式下网页无法通过脚本检测或干预 F11 触发过程，且页面布局可能因地址栏/工具栏隐藏而发生重排。
三、使用 CSS :fullscreen 伪类控制全屏样式
当元素通过 requestFullscreen 成功进入全屏后，可通过 :fullscreen 伪类为其定义专属样式，提升视觉一致性与用户体验，该规则对 F11 全屏无效。
1、在 CSS 中声明：div:fullscreen { width: 100vw; height: 100vh; background: black; }。
2、支持带前缀的写法以覆盖旧版浏览器：div:-webkit-full-screen、div:-moz-full-screen、div:-ms-fullscreen。
3、确保伪类选择器作用于已成功调用 requestFullscreen 的元素，否则样式不会生效。
4、可结合 transition 属性为全屏切换添加平滑过渡效果，例如：div:fullscreen { transition: background 0.3s ease; }。
四、退出全屏的两种方式
退出全屏需匹配进入方式：由 requestFullscreen 触发的全屏必须通过 document.exitFullscreen() 退出；F11 触发的则只能由用户再次按 F11 退出，脚本无法强制干预后者。
1、调用标准退出方法：document.exitFullscreen()。
2、兼容旧版浏览器时补充前缀方法：document.webkitExitFullscreen()、document.mozCancelFullScreen()、document.msExitFullscreen()。
3、退出前可检查当前是否处于全屏状态：document.fullscreenElement !== null。
4、退出操作同样需置于用户交互事件中，否则部分浏览器会静默忽略。
