ios safari 不支持 :fullscreen 伪类，需用 js 监听 fullscreenchange 事件并手动添加 class 标记全屏状态，配合 fixed 定位与 safe-area-inset-bottom 适配。
CSS 无法可靠判断“iOS 全屏模式”——因为 iOS Safari 根本不支持 :fullscreen 伪类，也没有等效的 CSS 状态钩子。
为什么 :fullscreen 在 iOS 上完全失效
iOS Safari（包括微信、QQ 等主流 WebView）从不触发标准 :fullscreen 伪类，哪怕你成功调用了 video.requestFullscreen()。它只认私有前缀 ::-webkit-full-screen，但该前缀在 iOS 15.4+ 已被移除，且实际行为极不稳定：常返回 null、不触发样式、或仅对 <video></video> 标签局部生效，不适用于自定义容器。
- 写
.player:fullscreen或.player::-webkit-full-screen→ iOS 上基本无反应 - 用
document.querySelector(':fullscreen')→ iOS 返回null，即使视频看起来“全屏”了 - 双击视频、F11、横屏自动全屏等行为 → 全部绕过 JS API，CSS 完全不可感知
真正可用的检测方式只有 JS + fullscreenchange 事件
必须放弃纯 CSS 方案，改用 document.fullscreenElement 配合事件监听，并手动同步状态到 DOM：
- 监听
document.addEventListener('fullscreenchange', ...)，检查document.fullscreenElement是否为你的目标元素 - iOS 上
requestFullscreen()大概率静默失败或降级为“伪全屏”（如cssFullscreen），此时fullscreenElement仍为null - 需额外判断是否处于横屏 + 视口满屏状态：
window.innerHeight === screen.height && window.orientation === 90（仅作辅助，不绝对） - 推荐做法：进入疑似全屏状态时，主动给根元素加 class，例如
document.documentElement.classList.add('is-ios-fullscreen')，再用.is-ios-fullscreen .player { ... }写样式
移动端适配要绕开“全屏判断”，直接按场景写 CSS
iOS 所谓“全屏”本质是视口最大化 + 地址栏隐藏，应聚焦真实布局问题，而非状态识别：
- 用
position: fixed; top: 0; bottom: 0; left: 0; right: 0;替代height: 100vh，避免滚动条 - 安全区必须显式处理：
padding-bottom: env(safe-area-inset-bottom)，且<meta>中必须含viewport-fit=cover - 检测支持性只能靠
@supports (padding-bottom: env(safe-area-inset-bottom))，不能依赖 UA 字符串 - 如果用了 xgplayer 等播放器，其
cssFullscreen模式根本不会触发任何全屏 API，此时唯一依据是它自己暴露的isCssFullscreen属性或 class
最易被忽略的一点：iOS 上没有“真正的全屏状态 CSS 钩子”，所有依赖 :fullscreen 的样式方案在真机上都会断层。能稳定工作的，永远是结合 JS 状态标记 + 固定定位 + 安全区适配的组合拳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
