allowfullscreen失效是权限问题而非css问题：必须双写allowfullscreen和allow="fullscreen"，确保父页无permissions-policy: fullscreen 'none'响应头，且iframe内用户手势触发requestfullscreen()。
allowfullscreen 失效和 CSS 无关，加再多样式也救不回来。 它是浏览器权限控制层的开关，不是渲染层问题。排查方向必须回到 HTML 属性、响应头、JS 触发上下文这三层。
为什么 CSS 查不出 allowfullscreen 是否生效
CSS 只能影响视觉表现，而 allowfullscreen 和 allow="fullscreen" 是运行时权限策略，由浏览器在解析 iframe 标签时立即决策。DevTools 的 Styles 面板里根本看不到它——你得去 Elements 面板右键 iframe → “Inspect iframe” → 看右侧的 Permissions 标签页，确认 fullscreen 显示为 Allowed。
常见误操作包括：
- 以为给 iframe 加了
style="width:100%;height:100%"就能“撑开全屏”，其实只是拉伸容器，子页内容仍受权限拦截 - 用
.iframe-wrapper:fullscreen去写样式，但父页 document 永远不会进入全屏状态，这个伪类永远不匹配 - 在子页里写
video:fullscreen却发现没生效——那是因为requestFullscreen()根本没通过，连进全屏状态的机会都没有
真正要检查的三个硬性条件
允许 iframe 全屏不是“写了属性就完事”，而是三道关卡必须全部通关：
-
allowfullscreen和allow="fullscreen"必须双写（尤其跨域场景），拼写不能错：allow="full-screen"或allowfullscreen="true"都无效 - 父页面 HTTP 响应头不能含
Permissions-Policy: fullscreen 'none'，否则 HTML 属性直接被无视 - iframe 必须带
sandbox="allow-scripts"（如果用了 sandbox），否则子页 JS 根本不执行，requestFullscreen()压根不会被调用
子页全屏后怎么用 CSS 控制布局
一旦权限通过、全屏成功，CSS 才真正起作用。注意：全屏状态属于子文档，所以样式必须写在子页 HTML 里，而不是父页：
- 目标元素（比如
<div id="player">）需定义 <code>.player:fullscreen，不是iframe:fullscreen - 兼容旧版 Safari 要加
.player:-webkit-full-screen（两个连字符，不是三个） - 退出全屏后样式不会自动还原，务必补上基础样式：
.player { width: 640px; height: 360px; }，否则会卡在 100vw/100vh
最常被忽略的一点：全屏 API 的触发必须发生在 iframe 内部用户点击事件中。父页按钮点一下、再用 postMessage 让子页自己调 requestFullscreen() —— 这才是唯一可靠路径。任何试图绕过这个手势链路的写法，都会静默失败。
