: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></video>元素） - 避免在 iOS 上依赖
fullscreenchange事件做关键逻辑分支
也就是说，纯 CSS 控制全屏样式在 iOS 上基本不可行，必须配合 JS 特征检测 + 平台专属处理。
真正麻烦的不是写多少样式，而是每次都要查当前 document.fullscreenElement 是否真实存在、是否被用户手动退出、是否被系统拦截——这些状态切换没有中间态，只有瞬间跳变。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
