看到最后我沉默了，蘑菇视频电脑版的界面布局问题我终于定位到原因了
最近在帮朋友排查蘑菇视频电脑版（Windows）界面错位、元素重叠、工具栏消失等问题时，经历了反复试验和排除，最后把原因锁定在“高 DPI 缩放与应用本地布局存储逻辑的叠加错误”上。把过程和解决方案整理出来，方便遇到同样问题的人快速恢复正常使用，也给产品团队留下一套可验证的修复建议。
症状（典型复现）
- 窗口内右侧或下方面板意外覆盖视频区域，且无法通过拖动复位；
- 菜单按钮位置偏移，点击区域与显示位置不一致；
- 在多显示器、不同缩放率之间切换后问题加重或首次启动即出现；
- 重装程序、清空缓存后短时间恢复，但重启或切换显示器后再次出现。
环境
- Windows 10 / 11，用户屏幕缩放非 100%（如 125%、150% 等）；
- 蘑菇视频基于 Chromium/Electron 类内核的桌面客户端（常见于此类问题）；
- 多显示器或笔电外接显示器的混合场景更易触发。
定位过程与结论（一句话） 界面错位源自：应用在不同 DPI 下对布局尺寸的计算与“本地存储的布局参数”之间未做一致性校正，导致放缩系数被重复应用或用错基准值；在多显示器切换时，应用没有及时更新 devicePixelRatio，从而把错误的数值存回配置，形成恶性循环。
为什么会这样（原理简述）
- Chromium/Electron 中窗口和渲染层各有自己的像素/布局单位，devicePixelRatio 代表显示缩放比；
- 应用把当前窗口的像素值乘以缩放比计算布局并保存（例如侧栏宽度、播放器坐标等），但读取时有时直接当作“逻辑像素”再次乘以缩放比；
- 当 Windows 的显示缩放改变（或把程序从 100% 显示器拖到 150% 显示器）时，程序没有做充分的边界检测或回退，导致布局数值累加或乘错，界面看起来“漂移”或错位。
用户可执行的修复步骤（按优先级） 1) 临时快速修复（非破坏性）
- 退出蘑菇视频；
- 右键程序快捷方式 → 属性 → 兼容性 → 更改高 DPI 设置 → 勾选“替代高 DPI 缩放行为”，并在下拉选项选择“由应用程序处理”或“由系统（增强）处理”；尝试两种设置看哪种更稳定；
- 重新启动程序，检查界面是否恢复正常。
2) 清理并重置本地布局配置（建议先备份）
- 关闭程序；
- 打开资源管理器，输入 %appdata% 查找蘑菇视频对应文件夹（名称类似 “MoguVideo” / “蘑菇视频” / 程序名），备份其中的 settings.json、localStorage 或 layout.json；
- 删除或把这些文件移出，重新启动程序（程序会以默认布局生成新的配置）；
- 若问题解决，可逐步把个人偏好重新设置并观察是否再次出现，从而判断是否为某一具体配置项导致。
3) 在多显示器环境下的稳定方法
- 把程序放在主显示器上，设置好布局后再拖到其他显示器测试；
- 避免在不同缩放率屏幕间频繁拖动播放窗口，必要时退出并重新启动到目标显示器上。
给开发团队的建议（技术层面可直接应用）
- 在保存布局参数前，统一使用“逻辑像素”（CSS 像素）进行存储；读取时按当前 devicePixelRatio 做单向转换，避免双重缩放。
- 在窗口移动或显示缩放改变时（监听 electron 的 ‘display-metrics-changed’ / window.onresize / resize event），立即校验并更新布局，必要时进行防抖与回退策略，避免频繁写入错误配置。
- 启用版本化的布局配置：每次保存布局时带上一个 scalingTag（例如保存时记录 devicePixelRatio 和屏幕 id），下次读取若不匹配则触发自动重计算或回退到默认。
- 在渲染端多做边界检查：侧栏最小/最大宽度、播放器最大高度等，若读取到超出合理范围则不给予应用并记录日志供上报。
给高级用户的额外手段（仅在了解风险时使用）
- 打开开发者工具（如果客户端支持）检查 window.devicePixelRatio 与 document.documentElement.clientWidth 是否匹配；
- 在控制台中临时执行 localStorage.clear() 或调整 layout 值以实时验证问题来源。
