蘑菇视频官网在横屏切换时，夜间模式找不到或失效会让人很抓狂。为快速定位问题，请先问自己下面这9个问题——每个问题都配上能马上尝试的排查方法，帮助你在几分钟内定位并解决问题，或者把明确的故障点交给开发人员处理。
1) 我是在浏览器打开还是在独立客户端/内嵌播放器里？
- 为什么问：不同环境下 UI 和设置点不同。内嵌播放器或第三方 WebView 可能没有夜间模式开关。
- 立刻做：试着用手机自带浏览器或桌面浏览器打开同一页面，看问题是否复现；若客户端内嵌，切换到网页版确认差异。
2) 横屏后夜间模式是自动关闭，还是只是看不到切换按钮？
- 为什么问：自动关闭通常是代码在 orientationchange 时重置样式；看不到按钮则可能是响应式布局隐藏了控件。
- 立刻做：横屏时用缩放或浏览器开发者工具查看页面 DOM，查找夜间模式开关的位置（header、侧栏、播放器控件等）。
3) 网站是否跟随系统深色/浅色偏好（prefers-color-scheme）？
- 为什么问：如果跟随系统偏好，切换屏幕方向与系统主题无关，但某些浏览器在横竖切换时可能重新计算媒体查询。
- 立刻做：临时在系统设置里切换深色/浅色模式，或在开发者工具里模拟 prefers-color-scheme，看页面响应是否按预期。
4) 夜间模式的状态保存在本地（localStorage/cookie）吗？
- 为什么问：状态如果存在本地存储，横屏时页面应读取并应用；如果没有被写入或读取失败，就会丢失。
- 立刻做：打开开发者工具的 Application/Storage 面板，检查 localStorage 或 cookie 是否包含夜间模式标志；手动修改测试。
5) 横屏时页面是否被重定向到另一个 URL 或加载了不同的播放器/组件？
- 为什么问：不同 URL 或第三方播放器可能没有夜间模式支持。
- 立刻做：观察地址栏，检查是否有参数变化或跳转；若是 iframe/嵌入式播放器，检查播放器设置。
6) 是否有 JavaScript 错误阻止夜间模式逻辑执行？
- 为什么问：脚本报错会中断后续代码，导致样式切换失效。
- 立刻做：打开控制台（Console），查看错误信息；在横屏切换时观察是否有新报错出现，并截屏保存给开发者。
7) 是所有设备/浏览器都会出现，还是仅在某些机型上？
- 为什么问：如果是单一机型或浏览器问题，可能是渲染或兼容性问题。
- 立刻做：在另一台手机、平板或桌面浏览器上测试，同一网络下也测试；记录能复现的设备型号和浏览器版本。
8) 是否因为缓存或旧版本资源导致样式丢失？
- 为什么问：旧 CSS/JS 可能未包含横屏兼容修复。
- 立刻做：清空缓存并强制刷新（Ctrl/Cmd + Shift + R）；或在无痕模式重新访问。
9) 页面是否在横屏时触发了特殊的 CSS/JS（例如 orientationchange）但没有正确应用夜间样式？
- 为什么问：开发者常在 orientationchange 里调整布局，若忘了保留夜间类或重新应用主题就会丢失。
- 立刻做：在开发者工具里模拟 orientationchange 或手动调用页面里暴露的主题函数；若会丢失，把这个行为记录下来给开发人员。
快速排查流程（3 分钟到位）
- 第一步：在另一个浏览器/设备复现问题，确认是普遍现象还是单环境问题。
- 第二步：开控制台 + Network + Application，检查是否有 JS 报错、资源 404 或 localStorage 没有保存主题标志。
- 第三步：清缓存并强刷，若仍然复现，截取报错和 URL，记录设备信息与操作步骤，提交给技术支持。
给开发者的可行提示（便于快速修复）
- 在页面加载时优先从 localStorage/cookie 读取主题并立即添加 body 类，避免渲染闪烁。
- 监听 prefers-color-scheme 与自定义主题切换，且在 orientationchange 时不要移除主题类。
- 示例：window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handler);
- 在横竖切换时保持状态同步：window.addEventListener('orientationchange', ()=>{ applySavedTheme(); });