:fullscreen伪类不生效主因是未触发原生全屏——需用户手势同步调用requestFullscreen()，并检查iframe的allow="fullscreen"、页面聚焦及跨域问题。
fullscreen伪类在Chrome/Firefox中不生效？检查是否触发了原生全屏
很多同学写了 :fullscreen 样式却没反应，不是CSS写错了，而是浏览器根本没进入「真正全屏状态」——Element.requestFullscreen() 必须由用户手势（如 click）触发，且不能被异步延迟（比如包在 setTimeout 或 Promise.then 里）。自动调用、iframe 嵌套、跨域 iframe、或调用时页面未聚焦，都会静默失败。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
document.fullscreenElement实时判断是否真进全屏，别只信样式生效 - 在按钮
onclick里直接调用el.requestFullscreen()，中间别加 await / setTimeout - 如果 el 是 iframe，需确保其
allow="fullscreen"属性存在，且同源 - 移动端 Safari 不支持
:fullscreen（仅支持::-webkit-full-screen），iOS 必须用webkitEnterFullscreen()视频 API
:fullscreen 和 ::backdrop 的样式优先级怎么拉扯？
:fullscreen 作用于全屏元素自身，::backdrop 作用于它背后的半透层（浏览器自动插入的伪元素）。两者层级关系固定：::backdrop 在底层，全屏元素在上层。但很多人误以为 backdrop 可以覆盖内容，结果发现背景色没透出来——其实是 backdrop 默认透明，且不继承父级 z-index。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
::backdrop必须显式设background才可见，例如div:fullscreen::backdrop { background: rgba(0,0,0,0.8); } - 不要给
::backdrop设z-index，它没有 stacking context；想盖住它？只能提高全屏元素子元素的z-index - Firefox 中
::backdrop不支持动画，Chrome 支持但有渲染延迟，避免用transition控制 backdrop 显隐 - 若需自定义遮罩（比如带关闭按钮的蒙层），别依赖
::backdrop，改用绝对定位 DOM 元素 +pointer-events: none配合
全屏后字体/布局错乱？重置 viewport 和缩放行为
进入全屏后，部分安卓 WebView 或旧版 Chrome 会重置 viewport 缩放逻辑，导致文字突然变小、rem 基准错乱、fixed 定位偏移。这不是 CSS 问题，是浏览器在全屏上下文里悄悄切了渲染模式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
:fullscreen规则里强制重置text-size-adjust: 100%，防 iOS 自动放大文本 - 避免用
vh做高度基准（全屏时浏览器 UI 隐藏，100vh可能比视口还高），改用100dvh（现代浏览器支持）或 JS 动态读取screen.height - 全屏元素内慎用
position: fixed，某些 Android 版本下 fixed 元素会卡在旧视口位置；优先用position: absolute+top: 0 - 监听
fullscreenchange事件，在进入/退出时手动触发一次resize，唤醒布局重算
退出全屏后样式残留？别只靠 :fullscreen 清理
:fullscreen 是瞬时状态伪类，退出后样式自动失效，但实际开发中常遇到“退出后按钮还灰着”“背景色没恢复”——问题往往出在 JS 主动加的 class 没清理，或者 CSS 过度依赖全屏状态做不可逆变更（比如把 body 设为 overflow: hidden 却忘了还原）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有伴随全屏开启的副作用（
body锁定滚动、禁用快捷键、暂停视频），必须在fullscreenchange事件里配对处理，别指望 CSS 自己兜底 - 避免用
:not(:fullscreen)写回退样式，兼容性差且逻辑反直觉；统一用默认样式 +:fullscreen覆盖更可靠 - 如果用了 CSS-in-JS 或 scoped style，确认全屏相关 class 没被提取到全局，导致退出后仍影响其他组件
- 测试时务必手动按
ESC退出，别只点 JS 封装的exitFullscreen()—— 用户真实操作路径才是关键
全屏不是单纯加个伪类就完事，它牵扯浏览器渲染管线、事件调度、移动端特殊策略三层逻辑。最常漏掉的是：没监听 fullscreenerror 看失败原因，也没在 fullscreenchange 里区分进入/退出做不同清理。
