全屏布局应使用100vh或100dvh而非height:100%，注意iOS Safari地址栏跳变问题；:fullscreen伪类需严格匹配实际全屏元素，正确书写各浏览器前缀并监听fullscreenchange事件管理样式回退。
全屏布局不是“填满屏幕”而是“匹配视口”
用 height: 100% 实现全屏基本无效——它依赖父级高度，而默认 html 和 body 没有显式高度。真正可靠的是视口单位：100vh 表示当前可视区域高度的 100%，不依赖文档流，也不受祖先元素影响。
但要注意：100vh 在 iOS Safari 中会因地址栏显隐跳变（比如滚动时地址栏收起，100vh 却仍按旧高度计算），导致底部留白或内容被截。更稳的做法是：
-
min-height: 100vh+height: auto：防止内容超长时被裁剪 - 现代浏览器可用
100dvh（dynamic viewport height），它会响应地址栏变化，但需检查兼容性（Safari 16.4+、Chrome 108+） - 极端场景下用 JS 动态读取
window.innerHeight并写入 CSS 变量，再在样式中引用
:fullscreen 伪类只对调用 requestFullscreen() 的那个元素生效
写了 .player:fullscreen 却没反应？大概率是因为 JS 调用的是 document.getElementById('video-wrap').requestFullscreen()，但该元素根本没有 player 这个 class。CSS 不认“看起来像”，只认 DOM 实际身份。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
- 用
body:fullscreen或div:fullscreen——body几乎从不进全屏，整条规则被浏览器忽略 - 元素本身有
display: none或visibility: hidden，进全屏后照样不可见 - 选择器写成
.player:-webkit-full-screen（单冒号）或.player::-webkit-full-screen（三连字符），语法错误直接失效
正确做法：先 console.log(document.fullscreenElement) 看返回值，然后照着它的标签名、ID 或 class 写选择器，例如 video:fullscreen、#player:fullscreen。
必须并列声明所有浏览器前缀，拼错一个就全挂
现代浏览器虽支持标准 :fullscreen，但旧版 Chrome/Safari（Chrome 70 前、Safari 15.4 前）、Firefox（63 前）仍需前缀。而且它们不是“选一个就行”，是必须全部写上，缺一不可。
标准写法（注意大小写和连字符数量）：
video:fullscreen { width: 100vw; height: 100vh; }
video::-webkit-full-screen { width: 100vw; height: 100vh; }
video::-moz-fullscreen { width: 100vw; height: 100vh; }
关键细节：
-
::-webkit-full-screen是双冒号 + 两个连字符（不是三个） -
::-moz-fullscreen中moz全小写，不能写成Moz或moz-full-screen - 不要用逗号合并写法，比如
.modal:fullscreen, .modal::-webkit-full-screen—— Safari 某些版本会整组失效
退出全屏后样式不会自动还原
:fullscreen 是单向覆盖，不是状态开关。比如你只设了 .player:fullscreen { padding: 0; }，退出后 padding 依然是 0，可能导致布局错位。
解决思路不是靠 CSS 自动回退，而是主动管理：
- 监听
fullscreenchange事件，在退出时手动重置关键样式 - 避免在
:fullscreen规则里用!important覆盖基础布局属性（如position、display），否则退出后难以恢复 - 优先用具体子元素选择器，比如
video:fullscreen .controls { opacity: 1; }，而不是改父容器整体布局
最易被忽略的是：全屏状态下部分安卓 WebView 会重置 viewport 渲染逻辑，导致 rem 基准偏移、fixed 定位卡死——这不是样式写错了，是浏览器悄悄换了渲染上下文，得单独处理。
