requestFullscreen() 必须由用户手势触发且在安全上下文中运行，需处理浏览器前缀、iframe 的 allowfullscreen 属性、:fullscreen 伪类重置样式、监听 fullscreenchange 事件及移动端兼容性问题。
点击按钮触发全屏，用 requestFullscreen() 就行
现代浏览器支持原生全屏 API，不用第三方库也能实现。关键不是“怎么加按钮”，而是调用时机和权限限制——requestFullscreen() 必须由用户手势（如 click）触发，且只能在安全上下文（https 或 localhost）中工作。
- 直接在按钮
onclick里调用element.requestFullscreen()，别放在异步回调或定时器里 - 目标元素可以是任意块级元素（比如
<div id="tutorial">），不一定是<body> - 注意：Safari 需要前缀
webkitRequestFullscreen()，Firefox 旧版本用mozRequestFullScreen() - 如果页面有 iframe，需添加
allowfullscreen属性，否则调用会静默失败
全屏后样式错乱？加 :fullscreen 伪类重置
进入全屏时，浏览器会给目标元素加上 :fullscreen 状态（Chrome/Firefox/Edge），Safari 用 ::-webkit-full-screen。不手动写样式的话，很多默认 margin、padding、flex 布局会变形。
- 常见问题：文字被截断、滚动条消失、定位偏移——本质是全屏状态下元素脱离常规文档流，盒模型重算
- 推荐最小化重置：
#tutorial:fullscreen { width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; } - 不要只写
body:fullscreen，因为全屏的是你指定的容器，不是整个页面
退出全屏没响应？监听 fullscreenchange 事件
用户按 ESC 或调用 document.exitFullscreen() 后，页面不会自动刷新，但 DOM 状态已变。想同步 UI（比如按钮文字从“全屏”变成“退出”），必须监听全局事件。
- 事件绑定在
document上，不是目标元素：document.addEventListener('fullscreenchange', () => { const btn = document.getElementById('fs-btn'); btn.textContent = document.fullscreenElement ? '退出全屏' : '全屏教程'; }); -
document.fullscreenElement为null表示未全屏，否则返回当前全屏的 DOM 节点 - 别漏掉兼容写法：
document.webkitFullscreenElement（Safari）、document.mozFullScreenElement（老 Firefox）
移动端点不动？检查 touch-action 和 viewport 设置
iOS Safari 和部分安卓浏览器对全屏触发更严格：按钮必须可触摸、无 pointer-events: none、不在 overflow: hidden 容器内，且页面不能禁用缩放。
立即学习“前端免费学习笔记（深入）”；
- 确保按钮有明确尺寸和背景，避免被误判为不可交互区域
- 移除父容器的
touch-action: none，否则手势事件被拦截 - viewport meta 标签里不能含
user-scalable=no，否则 iOS 直接禁用全屏 API - 真机调试时，打开 Safari 开发者工具 → “Settings” → 勾选 “Full Screen API” 才能看到控制台报错
file:// 协议时，Chrome/Safari 会直接拒绝全屏请求，必须起一个本地服务（比如 python3 -m http.server）才能测通。 
