html5怎么设置全屏_html5用requestFullscreen API或F11实现全屏【全屏】

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、退出操作同样需置于用户交互事件中，否则部分浏览器会静默忽略。