同样是蘑菇视频官网，为什么你的横竖屏切换总出状况？可能少了这一步
同样是蘑菇视频官网，为什么你的横竖屏切换总出状况？可能少了这一步
很多网站在手机上看视频时，横竖屏切换会出现画面裁切、黑边、控件错位、自动进入或退出全屏不稳定等问题。原因通常不是“浏览器坏了”，而是页面在移动端适配和播放器初始化上少走了一步或几个细节没处理好。下面把常见原因、可马上落地的排查步骤和修复代码一并给出，供直接复制到蘑菇视频官网上测试并发布。
一、常见原因一览（先读这一节，省时间）
- 缺少合适的 viewport meta（移动端缩放与视口没设置好）。
- 使用 100vh 导致地址栏出现/隐藏时高度计算错误。
- 视频容器或父元素有 transform、fixed 导致重排和定位问题。
- 没对横竖屏切换做重计算（resize/orientationchange 未处理，或去抖不当）。
- iOS Safari 的全屏/内联播放策略（需要 playsinline、webkit-playsinline）。
- 播放器库在重新布局时没有被重新触发或没有调用其 resize 接口。
- CSS object-fit/contain/cover 未合理设置，导致拉伸或留黑边。
- Safe area（刘海、底栏）与 viewport-fit=cover 没处理好。
二、一步步排查与修复（按顺序来做，效率最高） 1) 检查并添加正确的 viewport 页面 head 加入： viewport-fit=cover 用于处理 iOS 的安全区（刘海/底栏）。
2) 给视频元素加上内联播放支持（防止 iOS 自动全屏或交错行为） 在 video 标签上加入：
3) 解决 100vh 高度问题（移动端地址栏影响） 移动端用 CSS 的 100vh 会在地址栏显示/隐藏时产生跳动。推荐用 JS 计算一个 CSS 变量 --vh：
CSS 使用： .fullscreen { height: calc(var(--vh) * 100); }
4) 用 object-fit 保持画面比例，并去掉默认 inline gap .video-element { width: 100%; height: 100%; object-fit: cover; /* 或 contain，按需求选择 */ display: block; }
object-fit: cover 会裁切保满屏，contain 会完整显示但可能留黑边。按产品体验选择。
5) 监听 resize/orientationchange，重算播放器大小（关键一步） 很多问题出在切换后没有通知播放器或没有重新计算容器尺寸。示例代码（包含防抖）：
6) 小心 transform/position/fixed：避免父元素使用 transform 导致 fixed 子元素定位失效 如果父元素使用 transform（例如 transform: translateZ(0)），可能会创建新的 stacking context，影响 fixed 定位或播放器的全屏行为。逐层检查 CSS，尽量让 video-container 在文档流中不被 transform 包裹，或将播放器放到 body 直系子节点并用 JS 控制显示。
7) 处理 iOS 全屏与控制条（如果想要内联而非自动全屏） 在 iOS 上，使用 playsinline webkit-playsinline，并确保 video 没有自动触发全屏的 API 调用（如 requestFullscreen），除非确实需要。同时要设置 CSS 来控制控件显示位置，避免横屏时控件被遮挡。
8) Safe area（刘海屏/圆角）的兼容 CSS 示例： body { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } 配合 meta viewport-fit=cover 可以让视频在全屏时不会被刘海或底部手势条遮挡。
9) 使用 @media 根据方向调整布局 CSS 示例： @media (orientation: landscape) { .player-ui { /* 横屏时的控制布局 / } } @media (orientation: portrait) { .player-ui { / 竖屏时的控制布局 */ } }
10) 检查服务端/缓存与第三方 SDK
- 若使用 Service Worker，清缓存后再次测试，确认不是旧 CSS/JS 被缓存造成。
- 若集成广告或 DRM SDK，测试关闭这些模块后是否恢复正常，逐步定位。
三、调试清单（快速逐项核查）
- head 中有 meta viewport 吗？（width=device-width, initial-scale=1, viewport-fit=cover）
- video 标签是否含 playsinline 与 webkit-playsinline？
- 是否使用了 100vh？是否改为 --vh 方案？
- 切换横竖屏后是否触发 resize/orientationchange 的重算？是否防抖合理？
- object-fit 设置是否符合预期（cover vs contain）？
- 父元素是否使用 transform 或影响定位？是否在 body 下新建播放器容器试验？
- 在 iOS/Android 真机上分别测试（浏览器和系统版本差异很重要）。
- 若使用第三方播放器，是否调用了其 resize API 或 reload 方法？
四、实战代码整合（可直接复制） 在 head：
HTML 结构：
CSS（简化版）： :root { --vh: 1vh; } .fullscreen { height: calc(var(--vh) * 100); width: 100%; } .video-root, .video-container { position: relative; overflow: hidden; } .video-element { width: 100%; height: 100%; object-fit: cover; display: block; }
JS（整合）：
五、最后几条快速经验谈（实战中极为好用）
- 真机会测试比模拟器可靠。不同手机/浏览器行为差异明显。
- 先把播放器放到 body 直系节点做测试，确认问题是否来自父层布局。
- 横屏体验常涉及控件重排（比如关闭某些竖屏元素），用 @media 和 JS 同步调整。
- 若问题偶发，开启远程调试（Chrome/ADB 或 Safari Remote Web Inspector）抓日志和重排时间点。
结语 横竖屏切换问题背后通常是视口、尺寸计算和播放器重排这三类因素相互作用。按照上面的检查列表逐项排查，并在 resize/orientationchange 中做一次“重算+通知播放器”的处理，绝大多数问题会迎刃而解。把关键代码（viewport、--vh、playsinline、resize 处理）放到蘑菇视频官网的通用播放器模块里，后续新页面能自然继承稳定行为。需要我把上面的代码按你网站现有结构改写成可直接替换的脚本吗？
