HTML5的requestFullscreen API可程序化触发全屏，需用户手势触发并兼容各浏览器前缀；F11键实现浏览器级全屏但无法被API检测；退出全屏须调用exitFullscreen且同样需手势触发；:fullscreen伪类用于优化全屏样式。
如果您希望在网页中实现全屏显示效果，HTML5 提供了标准的 requestFullscreen API 用于程序化触发全屏，用户也可通过手动按 F11 键进入浏览器全屏模式。以下是具体实现方式：
一、使用 requestFullscreen API 触发全屏
requestFullscreen 是 Element 接口上的方法，调用后可使指定元素（及其子元素）占据整个屏幕。该方法需在用户手势（如点击、触摸）触发的上下文中执行，否则将被浏览器拒绝。
1、在 HTML 中定义一个目标容器，例如：
2、为该容器绑定点击事件，在事件处理函数中调用 requestFullscreen 方法：document.getElementById("fullscreenTarget").requestFullscreen();。
立即学习“前端免费学习笔记（深入）”；
3、为兼容不同浏览器，需添加前缀适配：element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen。
4、监听 fullscreenchange 事件以响应全屏状态变化：document.addEventListener("fullscreenchange", handler)。
二、监听并退出全屏状态
当页面处于全屏时，可通过 document.fullscreenElement 判断当前全屏元素是否存在；若存在，则说明已进入全屏模式，此时可提供退出入口。
1、检测是否处于全屏状态：if (document.fullscreenElement) { ... }。
2、调用 exitFullscreen 方法退出全屏：document.exitFullscreen()。
3、同样需添加浏览器前缀兼容：document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen。
4、退出操作也必须由用户手势触发，不能在定时器或异步回调中直接调用。
三、使用 F11 键手动进入浏览器级全屏
F11 是操作系统与浏览器共同支持的快捷键，按下后使整个浏览器窗口占据屏幕，不依赖任何 JavaScript 代码，也不受同源策略或权限限制。
1、在 Windows 或 Linux 系统中，直接按 F11 键即可切换浏览器全屏/窗口化。
2、在 macOS 上，使用 Control + Command + F 替代 F11 功能。
3、此方式下，网页无法通过 API 检测到该全屏状态，因为 document.fullscreenElement 始终为 null。
4、用户再次按相同快捷键即可退出该全屏模式。
四、设置全屏样式以优化视觉体验
进入全屏后，可通过 :fullscreen 伪类为全屏元素应用专属 CSS 样式，避免布局错乱或内容被裁切。
1、为全屏目标元素设置宽高占满视口：#fullscreenTarget:fullscreen { width: 100vw; height: 100vh; }。
2、隐藏滚动条以提升沉浸感：#fullscreenTarget:fullscreen { overflow: hidden; }。
3、添加浏览器前缀以覆盖旧版内核：#fullscreenTarget:-webkit-full-screen, #fullscreenTarget:-moz-full-screen, #fullscreenTarget:-ms-fullscreen。
4、确保字体大小、按钮尺寸等在全屏下仍具备可操作性，避免因视口缩放导致交互失效。
