必须在DOMContentLoaded后读取localStorage并设CSS变量，否则宽度复位；应改用setProperty设置--nav-width变量，配合.media查询适配移动端，避免!important和直接style.width。
宽度存不住、拖拽后复位、响应式失效——根本不是 bug，而是 localstorage 读取时机和 css 应用逻辑没对上。必须在 domcontentloaded 后立即读取并设值，不能等 window.load 或靠 css 覆盖。
为什么拖拽调整后宽度立刻复位？
phpMyAdmin 5.x 的左侧导航栏（通常是 .navigation 或 #serverinfo .sidebar）宽度由 JS 控制：拖拽时写入 localStorage.setItem('navWidth', width)，但默认不读、不设、不触发重绘。你看到的“复位”，其实是 DOM 渲染完才去读 localStorage，样式已定型，再改 style.width 会被 flex 布局或 CSS 规则覆盖。
- 检查浏览器控制台是否报错
Cannot read property 'width' of null——说明 JS 找不到目标容器节点 - 确认 localStorage 中是否存在
navWidth键：打开 DevTools → Application → Local Storage → 查看对应域名下是否有该 key - 不要直接修改
style.width，它会被后续 CSS（如flex: 1）强制重置；应改用 CSS 变量 +setProperty()
如何让宽度真正生效且跨页面保持？
核心动作就两步：读 localStorage、设 CSS 变量。关键在时机和方式——必须在 DOMContentLoaded 阶段完成，且避免使用 !important。
- 编辑
js/navigation.js（路径通常为 phpMyAdmin 根目录下的js/navigation.js），在$(document).ready(...)或document.addEventListener('DOMContentLoaded', ...)内部开头插入： const savedWidth = localStorage.getItem('navWidth'); if (savedWidth) { document.documentElement.style.setProperty('--nav-width', savedWidth + 'px'); }- 在自定义 CSS（如
custom.css或通过$cfg['CustomCSS']加载）中添加： .navigation { width: var(--nav-width, 240px); }- 移动端需加媒体查询适配：
@media (max-width: 768px) { .navigation { width: var(--nav-width, 200px); } }
为什么用 CSS 变量而不是直接改 style.width？
phpMyAdmin 5.x 多数布局基于 flex，容器父级常设 flex: 1 或 min-width，直接写 element.style.width = '260px' 会被计算样式覆盖；而 setProperty() 更新的是根元素变量，CSS 规则能稳定响应，且支持响应式断点继承。
- 若你发现宽度仍被覆盖，检查是否有其他 CSS 规则带更高优先级，比如
.navigation { width: 220px !important; }—— 删除所有!important，靠 specificity 和加载顺序解决 - 不要在
config.inc.php里硬编码宽度（如$cfg['NavigationTreeWidth'] = 260;），这个配置项在 5.x 中已被移除，无效 - 如果用了第三方主题，确认主题 CSS 是否重写了
.navigation宽度；优先在主题 CSS 后加载你的custom.css
最易被忽略的一点：localStorage 读取必须发生在 DOM 构建完成之后、任何 layout 触发之前。哪怕延迟 10ms（比如用 setTimeout(..., 0)），都可能错过首次渲染时机，导致宽度闪动或失效。
立即学习“PHP免费学习笔记（深入）”；
