HTML全屏需主动处理状态栏、导航栏等才能沉浸；requestFullscreen()被拒主因是非用户手势触发、HTTPS缺失、iframe未设allow="fullscreen"；:fullscreen伪类受限多，推荐用class手动控制；移动端仅部分元素支持全屏，且需注意横屏锁向与退出后状态重置。
HTML 全屏本身不强制要求沉浸体验，但想真正“沉浸”，必须主动处理状态栏、导航栏、样式适配和退出路径——否则用户点一下就进全屏，再点一下发现没退出按钮、文字被切掉、视频黑边一大片，体验直接断裂。
requestFullscreen() 为什么总被拒绝？
浏览器明确禁止非用户手势触发全屏。常见错误包括：
- 在
setTimeout、fetch回调、scroll或load事件里调用element.requestFullscreen() - 用
click绑定但实际触发的是子元素冒泡（比如按钮内嵌了span，事件监听在span上） - HTTPS 缺失：现代浏览器（Chrome/Firefox/Safari）在 HTTP 环境下直接禁用 Fullscreen API
- iframe 嵌套场景未设置
allow="fullscreen"属性
:fullscreen 伪类和动态 class 哪个更可靠？
:fullscreen 是标准伪类，支持 Chrome 71+、Firefox 64+、Safari 15.4+，但它不支持嵌套选择器（如 div:fullscreen .toolbar），且无法在 IE/旧 Safari 中降级。更稳妥的做法是手动切换 class：
document.addEventListener('fullscreenchange', () => {
document.documentElement.classList.toggle('is-fullscreen', !!document.fullscreenElement);
});
这样你可以用 .is-fullscreen .header { display: none; } 精确控制任意层级，也方便加 transition 动画或做 SSR 兼容。
立即学习“前端免费学习笔记（深入）”；
移动端全屏到底能不能用 video 以外的元素？
能，但限制极多：
- iOS Safari 只允许
<video>、<iframe>（含 YouTube）和<canvas>调用requestFullscreen()；document.documentElement或普通<div>会静默失败 - Android Chrome 支持任意元素，但若页面有
viewport的user-scalable=no，可能触发缩放锁定导致全屏后无法 pinch-zoom - 所有移动端都不响应
document.exitFullscreen()的键盘 ESC 键，必须提供显式退出按钮 - 横屏适配需配合
screen.orientation.lock('landscape')（需用户手势 + HTTPS），否则旋转后布局错乱
最易被忽略的点：全屏退出后，document.fullscreenElement 可能仍为 null，但部分 Android WebView 会残留 is-fullscreen class 或滚动位置异常——务必在 fullscreenchange 里重置 body overflow、scrollTop 和自定义状态变量。
