当时我人都傻了：蘑菇影视官网的横竖屏切换问题我终于定位到原因了
前言 那天有人在群里截图吐槽，说蘑菇影视官网在手机上横竖屏切换后页面布局错乱、视频区域黑边或无法自动适配。我打开测试机重现一次，结果确实又卡又丑——但排查过程中我反而乐了，问题不是单一，而是几种常见坑叠在一起。下面把流程、原因和可落地的修复方法写清楚，方便你直接拿去改代码。
如何重现（快速复现步骤）
- 使用 iOS Safari 或 Android Chrome（模拟器不准，真机更可靠）。
- 打开蘑菇影视官网任意播放页，先竖屏加载页面再切换到横屏，或先横屏再切换回竖屏。
- 注意观察：视频全屏/内嵌切换时黑边、控件位置异常、页面高度错位或按钮无法点击等问题出现概率高。
我看到的问题总结
- 页面主体用了 height: 100vh 导致切换后高度不正确（移动端地址栏、工具栏露出导致 100vh 不是可视高度）。
- 视频播放器在 iOS 上被强制全屏或因缺少 playsinline 导致布局异常。
- orientationchange/resize 处理不及时，页面没有在切换后重新计算布局或重绘。
- 某些容器用了 transform（比如 transform: translateZ(0) 或 rotate）导致浏览器在旋转后不触发重排或出现绘制残留。
这些因素叠加后就出现“人都傻了”的那种奇怪表现。
具体定位过程（我做了什么）
- 先排除资源问题：清缓存、关闭第三方脚本（广告、统计、A/B 测试），确认不是外部脚本在改 DOM。
- 打开 DevTools 远程调试手机，观察 window.innerHeight / innerWidth 与 visualViewport 的变化。
- 在旋转时打断点，发现 resize/orientationchange 事件触发时间与浏览器地址栏收起时间错位，导致我们的布局函数拿到错误高度。
- 对比 iOS 与 Android 行为，发现 iOS Safari 在视频元素进入或退出全屏时会自动旋转并改变布局策略——如果没有加 playsinline，会强制全屏，从而触发不一致表现。
可立即落地的修复方案（按优先级） 1) 修正 100vh 问题（推荐）
- 在 CSS 里尽量避免直接使用 height:100vh；改用 JS 动态设置一个 CSS 变量：
let vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh',
${vh}px); 在 CSS： .container { height: calc(var(--vh) * 100); } 并在 window.resize / orientationchange 时重新计算。
2) 视频在 iOS 上加上 playsinline、webkit-playsinline，使视频不被强制全屏：
3) 优化旋转时的重绘与布局函数
- 在处理 orientationchange / resize 时适当使用 setTimeout(…, 200) 或监听 visualViewport 的 resize 事件，确保拿到稳定的尺寸后再重新布局或计算 canvas、视频大小。
- 示例： function refreshLayout() { requestAnimationFrame(() => { // 读取 visualViewport 或 window.innerHeight，更新样式 }); } window.addEventListener('orientationchange', () => { setTimeout(refreshLayout, 250); }); window.addEventListener('resize', refreshLayout);
4) 避免在关键容器上使用 transform 或会脱离文档流的样式
- 如果确实需要 GPU 加速，确保在旋转后强制触发重排：element.style.willChange = 'auto'; 或短暂切换 display 来重绘。
5) 全屏与横竖屏控制（若使用全屏 API）
- 使用 Screen Orientation API 慎重：部分浏览器对锁定方向有限制。避免在不必要时自动调用 screen.orientation.lock()，让用户手动切换。
测试清单（修复后务必跑一遍）
- iOS Safari：竖→横、横→竖（包含进入/退出视频全屏）
- Android Chrome：同上
- 不同网络速度下（首屏加载慢时是否抖动）
- 关闭/开启广告脚本后是否仍稳定
结论（实战经验） 问题通常不是单点错误，而是“移动端视口+视频全屏+事件节奏”三者叠加的结果。把 100vh 换成基于 innerHeight 的 CSS 变量，给视频加 playsinline，优化 orientationchange 的重绘时机，通常能解决绝大多数横竖屏切换的异常。做完这些，页面在真机上流畅很多，我当时看到效果就放心了。
如果你愿意，我可以根据你的站点代码（把关键 HTML/CSS/JS 片段贴出来）给出更具体的修改建议和可直接替换的代码片段。要不要把你遇到的那个播放页代码贴来我看一下？
