CSS伪类:fullscreen应用_进入全屏模式后的样式定制

:fullscreen伪类仅在元素通过requestfullscreen()进入全屏时生效，需用户手势触发、作用于块级元素，且仅匹配直接全屏元素；子元素需用class控制，退出后须清理内联样式和transition。

fullscreen伪类不生效？检查是否在全屏上下文中使用

浏览器只在元素真正处于全屏状态（即通过 Element.requestFullscreen() 进入）时，才匹配 :fullscreen 伪类。直接写 css 却没调用 js 全屏 API，样式必然不会触发。

常见错误现象：:fullscreen 规则写了但颜色/尺寸没变；控制台无报错，开发者工具里也看不到该规则被应用。

• 必须先调用 element.requestFullscreen()（注意不同浏览器前缀已基本废弃，无需 webkitRequestFullscreen 等）
• 不能对 body 或 html 直接调用 —— 大多数浏览器会拒绝，需作用于一个可渲染的块级元素（如 div、video）
• 用户手势触发是硬性要求：必须在 click、keydown 等用户交互事件回调中调用，否则抛出 TypeError: Document not active 或静默失败

chrome/firefox/safari 样式差异大？用 :fullscreen 做统一入口，再按需覆盖

各浏览器对全屏元素的默认样式处理不一致：Firefox 会把全屏元素置顶并拉满视口，Chrome 默认加黑边框，Safari 可能保留滚动条或忽略某些 position 声明。

正确做法是把 :fullscreen 当作「进入全屏」的统一钩子，再在里面重置关键样式：

立即学习“前端免费学习笔记（深入）”；

div.fullscreen-target:fullscreen {   width: 100vw;   height: 100vh;   margin: 0;   border: none;   background: black;   object-fit: contain; /* 对 video/img 很关键 */ }

• :fullscreen 在 Safari 中需配合 -webkit-:fullscreen 前缀（仅旧版 Safari 15.4 及之前需要，新版已支持无前缀）
• 不要依赖 display: flex 在 :fullscreen 内居中 —— 某些版本 Firefox 会忽略，改用 position: absolute + inset: 0
• 字体大小缩放问题：ios Safari 全屏后可能放大文本，加 text-size-adjust: none 抑制

想让子元素也响应全屏状态？别嵌套 :fullscreen，用属性选择器或 JS 切换 class

:fullscreen 只匹配**直接进入全屏的那个元素**，它的子元素不会自动获得该伪类。试图写 div:fullscreen span 是无效的 —— 浏览器根本不匹配。

真实需求往往是「全屏时，整个播放器区域隐藏控制栏、放大视频」，这时得换思路：

• 在调用 requestFullscreen() 后，同步给父容器加 class，比如 player--is-fullscreen
• 或者监听 fullscreenchange 事件，在 document 上判断 document.fullscreenElement 是否为你的目标元素，再切换 class
• 避免用 :fullscreen 控制子组件显隐，CSS 里写 .player--is-fullscreen .controls { display: none; } 更可靠

退出全屏后样式没恢复？记得清理内联样式和过渡残留

全屏退出时，浏览器会自动移除 :fullscreen 匹配，但如果你在全屏状态下通过 JS 给元素加了 style.width = '100vw' 这类内联样式，退出后它还在，导致布局错乱。

还有个隐蔽坑：用 transition 动画进/出全屏，退出瞬间若未清除 transition 属性，可能卡在中间态或触发意外重绘。

• 监听 fullscreenchange 事件，在 document.fullscreenElement === NULL 时，手动清空关键内联样式：el.style.width = ''、el.style.height = ''
• 全屏相关 transition 建议写在 :fullscreen 规则内，而不是基础选择器里，避免退出后仍生效
• 部分安卓 webview（如微信内置）退出全屏后 document.fullscreenElement 延迟归 null，可用 setTimeout(..., 0) 做兜底检测

全屏样式看似简单，但跨浏览器行为差异、JS/CSS 协同时机、退出状态清理这三点，最容易漏掉。尤其是 document.fullscreenElement 的存在与否，得在每个关键路径里显式判断，不能靠伪类自动推导。