CSS伪类:fullscreen实战_进入全屏模式后的UI样式调整

: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 里区分进入/退出做不同清理。