requestFullscreen()需用户手势触发且受浏览器策略限制，全屏状态应通过fullscreenElement等属性结合事件判断，移动端无法禁用下滑退出但可优化体验。
HTML 全屏（requestFullscreen()）本身不强制要求“沉浸体验”，但浏览器在进入全屏后默认会隐藏地址栏、工具栏等 UI，这天然构成一种沉浸感；是否需要进一步做沉浸式处理，取决于你的实际场景——比如视频播放、WebGL 应用、Kiosk 展示屏，才真正在意是否禁用系统 UI、是否锁定方向、是否阻止退出。
为什么 requestFullscreen() 有时没反应？
常见原因不是代码写错，而是浏览器策略限制：
- 必须由用户手势触发（如
click、touchend），不能在setTimeout或加载完成回调里直接调用 - 部分浏览器（如 Safari iOS）要求页面在
https下运行，否则静默失败 - 如果元素被设为
display: none或未插入 DOM，调用会抛出NotFoundError - 某些安卓 WebView 或旧版 Chrome 对
iframe内全屏有额外限制，需加allow="fullscreen"
建议始终包裹 try/catch 并监听 fullscreenerror 事件排查：
button.addEventListener('click', () => {
try {
document.documentElement.requestFullscreen();
} catch (err) {
console.error('Fullscreen failed:', err.name);
}
});
document.addEventListener('fullscreenerror', () => {
console.warn('User denied or system blocked fullscreen');
});
fullscreenchange 事件里怎么判断当前是否全屏？
别依赖 document.fullscreenElement 是否为 null 就下结论——它只表示“是否有元素处于全屏”，但不反映状态是否已生效。更稳妥的方式是结合事件 + 属性检查：
立即学习“前端免费学习笔记（深入）”；
-
document.fullscreenElement !== null表示已进入全屏 -
document.fullscreenElement === null && document.fullscreenEnabled表示已退出，且全屏功能仍可用 - 注意：Safari 用
document.webkitFullscreenElement，Firefox 早期用document.mozFullScreenElement，建议用标准属性优先，降级兜底
简单判断函数可这样写：
function isFullscreen() {
return !!document.fullscreenElement ||
!!document.webkitFullscreenElement ||
!!document.mozFullScreenElement;
}
移动端全屏后如何防止用户滑动退出？
Android Chrome 和 Safari 在全屏后仍允许用户从顶部下滑退出，这不是 bug，而是系统级交互设计。你无法用 JS 禁用该手势，但可以降低误触概率：
- 确保全屏容器高度撑满视口：
height: 100vh+overflow: hidden - 避免内容区域出现可滚动的
div，否则滑动会先触发内部滚动，再触发退出 - 对视频类场景，使用
<video>的webkit-playsinline和playsinline属性，配合enterFullscreen()调用原生播放器全屏（更稳定） - Kiosk 模式下，应绕过浏览器，改用 PWA +
display: standalone或 Electron/Capacitor 封装
真正难处理的是多层嵌套 iframe 场景下的全屏权限传递，以及 iOS 上 requestFullscreen() 对非 <video> 元素的支持极不稳定——这些细节不踩一次坑很难意识到。
