网页全屏控制依赖Fullscreen API，核心方法为element.requestFullscreen()和document.exitFullscreen()，需用户手势触发，支持跨浏览器兼容处理及fullscreenchange事件监听。
网页全屏显示与退出全屏，主要依靠浏览器提供的 Fullscreen API，它是一套标准化的、跨主流浏览器（Chrome、Firefox、Edge、Safari 10+）支持的接口。核心是 element.requestFullscreen() 和 document.exitFullscreen()，配合事件和状态判断即可完成完整控制。
触发全屏：调用 requestFullscreen() 方法
必须由用户手势（如点击、按键）触发，不能在页面加载或定时器中自动调用，否则会被浏览器拒绝。
- 对整个页面全屏：调用
document.documentElement.requestFullscreen() - 对某个元素全屏（如视频容器）：调用该元素的
requestFullscreen()，例如videoEl.requestFullscreen() - 注意兼容写法：部分旧版浏览器需加前缀，如
webkitRequestFullscreen、mozRequestFullScreen，现代开发建议用 screenfull.js 封装处理
退出全屏：调用 exitFullscreen() 方法
无论当前是哪个元素处于全屏状态，都统一调用 document.exitFullscreen()。
- 成功退出时，会触发
document.onfullscreenchange事件（注意大小写，Safari 用onwebkitfullscreenchange） - 若未处于全屏状态时调用，不会报错，但无效果
- 同样存在兼容写法：
document.webkitExitFullscreen()、document.mozCancelFullScreen()
检测与监听全屏状态变化
通过 document.fullscreenElement 判断当前是否有元素处于全屏（返回该元素，为 null 表示未全屏）。
立即学习“Java免费学习笔记（深入）”；
- 监听变化：绑定
document.addEventListener('fullscreenchange', handler) - Safari 需额外监听
webkitfullscreenchange；Firefox 旧版用mozfullscreenchange - 可结合该状态动态更新按钮文字，例如“进入全屏” ↔ “退出全屏”
样式适配：全屏下的 CSS 伪类
使用 :fullscreen 伪类可为全屏元素定制样式（各浏览器前缀略有不同）：
-
div:fullscreen（标准） -
div:-webkit-full-screen（Chrome/Safari） -
div:-moz-full-screen（Firefox） - 常用于隐藏滚动条、调整宽高、隐藏 UI 控件等
