如何利用css的:fullscreen伪类调整全屏状态下的布局_全屏API的样式控制

如何利用CSS的:fullscreen伪类调整全屏状态下的布局

想用CSS的:fullscreen伪类来美化全屏体验？想法很好，但实际操作时，你可能会发现样式纹丝不动。别急着怀疑人生，这几乎是每个前端开发者都会踩的坑。问题往往出在几个关键细节上，从浏览器兼容性到API的异步特性，任何一个环节掉链子，都会让精心设计的样式“隐身”。

全屏状态下 :fullscreen 伪类为什么没生效

最常见的原因，其实是浏览器前缀没写全。这事儿得怪历史遗留问题：Chrome和Edge的早期版本用的是::-webkit-full-screen，Firefox则用::-moz-fullscreen，直到Safari 15.4+才开始支持标准的:fullscreen。所以，想确保万无一失，现代写法必须把几个“马甲”都声明上：

video:fullscreen {
  width: 100vw;
  height: 100vh;
}
video::-webkit-full-screen {
  width: 100vw;
  height: 100vh;
}
video::-moz-fullscreen {
  width: 100vw;
  height: 100vh;
}

这里有个细节要特别注意：浏览器之间对伪元素（::）和伪类（:）的写法要求不一，漏掉任何一个版本，都可能导致特定浏览器下的样式直接“罢工”。

document.fullscreenElement 的判断时机很关键

另一个高频踩坑点，是误判了全屏状态的时机。调用element.requestFullscreen()其实是个异步操作，你不能指望立刻就能从document.fullscreenElement里读到东西。典型的错误操作有两种：

• 在.requestFullscreen()后面紧跟着检查document.fullscreenElement，结果拿到个null。
• 虽然监听了fullscreenchange事件，但没用event.target或document.fullscreenElement做二次校验。

正确的做法，是把所有状态读取逻辑都放到事件回调里：

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

document.addEventListener('fullscreenchange', () => {
  if (document.fullscreenElement) {
    // 进入全屏，可触发 class 切换或动态加载样式
    document.body.classList.add('in-fullscreen');
  } else {
    document.body.classList.remove('in-fullscreen');
  }
});

全屏内嵌视频/Canvas 时的尺寸与缩放陷阱

就算样式生效了，全屏后的元素也可能被浏览器“自作主张”地拉伸变形，尤其是在macOS Safari或Windows高DPI屏幕上。问题通常出在这儿：

• width: 100vw在某些浏览器里会把滚动条的宽度也算进去，直接导致横向布局溢出。
• Canvas元素全屏时，如果只设置了CSS尺寸，而没重设canvas.width/canvas.height属性，画面就会变得模糊。
• 视频默认会保持宽高比，但如果父容器设置了object-fit: fill

video:fullscreen {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain; /* 或 cover，按需选 */
  margin: 0;
}
/* 防止 body 滚动干扰 */
body.in-fullscreen {
  overflow: hidden;
  margin: 0;
}