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

:fullscreen伪类未生效主因是浏览器前缀缺失，需同时声明标准及WebKit/Firefox私有版本；requestFullscreen()异步，须在fullscreenchange事件中读取document.fullscreenElement；iOS Safari不支持该伪类，需JS特征检测并降级处理。

全屏状态下 :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;}

移动端 Safari 对 :fullscreen 的限制

iOS/iPadOS Safari 完全不支持 :fullscreen 伪类，且 requestFullscreen() 调用会被静默忽略（不报错，也不进入全屏）。唯一可行路径是：

• 检测 'fullscreenEnabled' in document 且 !/iPhone|iPad|iPod/.test(navigator.userAgent)
• 对 iOS 用户降级使用 webkitEnterFullscreen()（仅限 <video> 元素）
• 避免在 iOS 上依赖 fullscreenchange 事件做关键逻辑分支

也就是说，纯 CSS 控制全屏样式在 iOS 上基本不可行，必须配合 JS 特征检测 + 平台专属处理。

真正麻烦的不是写多少样式，而是每次都要查当前 document.fullscreenElement 是否真实存在、是否被用户手动退出、是否被系统拦截——这些状态切换没有中间态，只有瞬间跳变。