蘑菇影视官网小窗打开时横竖屏排查5步：从1到5不绕弯
遇到蘑菇影视官网的小窗（浮窗/画中画）在横屏和竖屏切换时显示异常、位置跑位或尺寸错乱，往往不是单一问题。下面用5个明确的排查步骤，逐条定位并解决，操作直接、好上手。
- 先排查设备与浏览器设置
- 检查手机或平板的屏幕旋转锁定是否开启；若开启请关闭后再试。
- 在不同浏览器或客户端（Chrome、Safari、微信内置浏览器等）复现问题，判断是否浏览器特有。
- 清除浏览器缓存或使用无痕窗口重试，排除缓存/旧脚本干扰。
- 若问题出现在APP内嵌WebView，确认WebView是否有固定方向或被宿主APP拦截。
- 校验页面基础设置（meta 与 viewport）
- 确保页面包含适配移动端的meta标签，例如：
- 若页面有自定义缩放或布局限制，先临时恢复为标准viewport，排查是否与小窗样式冲突。
- 检查是否有全局CSS对html或body做了transform、rotate或强制fixed高度，可能影响小窗定位。
- 检查小窗样式与定位策略
- 优先用position: fixed来实现浮窗，避免position: absolute在不同视口时基准变化。
- 使用视口单位和自适应属性而非固定像素，例如width: calc(30vw); height: auto; 或使用aspect-ratio保持比例。
- 使用媒体查询分别定义横竖屏样式： @media (orientation: landscape) { .mini-window { width: 40vw; right: 2vw; bottom: 4vh; } } @media (orientation: portrait) { .mini-window { width: 80vw; right: 5vw; bottom: 6vh; } }
- 避免在父容器上使用 transform（特别是 scale/rotate），这会使 fixed 定位失效；若不可避免，考虑把浮窗挂到 body 下的顶层容器。
- 增加前端对横竖屏切换的监听与自适应逻辑
- 通过监听 orientationchange 或 screen.orientation 来即时调整样式与位置： window.addEventListener('orientationchange', () => { document.body.classList.toggle('landscape', Math.abs(window.orientation) === 90); adjustMiniWindowLayout(); });
- 使用屏幕尺寸变化事件作为备选： window.addEventListener('resize', adjustMiniWindowLayout); function adjustMiniWindowLayout() { const mw = document.querySelector('.mini-window'); if (!mw) return; if (window.innerWidth > window.innerHeight) { mw.classList.add('landscape'); mw.classList.remove('portrait'); } else { mw.classList.add('portrait'); mw.classList.remove('landscape'); } // 可在此调整宽高、位置或隐藏某些控件 }
- 对于视频播放的画中画（Picture-in-Picture），确认播放器是否调用了 requestPictureInPicture、以及在进入小窗时是否改变样式或触发布局重绘。
- 多场景验证与降级处理
- 在多款手机、模拟器、不同系统版本上测试（iOS Safari 与 Android Chrome 差异常见）。
- 若某浏览器或WebView表现异常，做兼容性降级：在该环境下禁止浮窗或提供固定尺寸的替代布局。
- 使用调试工具查看实时样式（Chrome DevTools 移动模式、远程调试），观察当切换横竖屏时哪些CSS值发生了变化。
- 最后一步是回溯日志：在关键事件（进入小窗、旋转事件、样式应用）打简单日志，帮助定位是样式、脚本还是宿主APP在篡改。
附加小贴士（快速清单）
- 优先排查设备旋转锁和浏览器特性差异。
- 把浮窗结构放在 body 的直接子节点，避免被父容器影响。
- 使用视口单位（vw/vh）与 aspect-ratio，减少硬编码像素。
- 监听 orientationchange/resize 并在回调中做必要的布局调整与重绘。
- 针对特定客户端做兼容性检测并实现降级方案。