phpMyAdmin 平板横屏显示不全是因为响应式 CSS 断点未覆盖 769–1024px 及以上宽度，且 JS 初始化依赖窄屏 DOM 结构，导致 .navigation 和 .sqlquery 错位、裁切；需新增媒体查询、修复 flex 宽度、调整 JS 读取 localStorage 及监听 resize，并清除缓存验证渲染。
phpmyadmin 在 ipad 或安卓平板横屏时显示不全，不是因为服务端限制，而是前端 css 响应式逻辑没覆盖到平板横屏场景——max-width: 768px 的媒体查询只捕获了竖屏窄态，横屏后视口宽度常达 1024px 甚至更高，但 dom 结构仍按窄屏渲染，导致左侧菜单塌陷、sql 区域被裁切、按钮错位。
为什么横屏后 .navigation 和 .sqlquery 会错位
phpMyAdmin 5.x 默认响应式断点只设在 768px，而多数平板横屏宽度为 1024px（iPad）或 1280px（部分安卓平板），此时 CSS 规则未生效，但 JS 初始化又依赖窄屏 DOM 结构（比如硬编码 #serverlinks 宽度为 220px），结果就是：左侧菜单没宽度、SQL 输入框高度固定、顶部页签换行错乱。
- 检查浏览器 DevTools 的
Computed面板，确认.navigation是否有width或flex-basis计算值；若为auto或0px，说明 CSS 未命中 - 打开控制台运行
getComputedStyle(document.querySelector('.navigation')).width，若返回auto，基本可判定媒体查询失效 - 不要只改
@media (max-width: 1024px)—— 需同时加@media (min-width: 769px) and (max-width: 1024px)和@media (min-width: 1025px)两档，覆盖横屏常见宽度
如何补全平板横屏的 CSS 适配规则
直接修改 css/common.css（或主题 CSS 文件），在末尾追加针对横屏平板的规则，重点修复三处：导航容器、SQL 区域、表格容器。避免用 !important，改用更具体的层级选择器。
-
.navigation { flex: 0 0 240px; }—— 显式设置基础宽度，防止 flex 自动收缩 -
.sqlquery textarea { min-height: 120px; height: auto; }—— 替代旧版固定height: 200px，避免横屏下内容被截 -
.table_container table { max-width: 100%; }—— 防止宽表撑破容器，配合overflow-x: auto横向滚动 - 加一条全局重置：
@media (min-width: 769px) { .navbar, .container { width: auto; } }，解除窄屏强制width: 100%对布局的干扰
JS 初始化失败导致拖拽菜单/页签失效
横屏下 navigation.js 常因 DOM 尺寸计算时机错误而跳过宽度设置逻辑——它默认在 window.load 后执行，但此时视口已变化，且 localStorage 中存的 navWidth 未被读取应用。
- 确保 JS 在
DOMContentLoaded后立即读取：const savedWidth = localStorage.getItem('navWidth'); if (savedWidth) document.querySelector('.navigation').style.flexBasis = savedWidth + 'px'; - 禁用
flex: 1类型的弹性伸缩，改用flex: 0 0 var(--nav-width, 240px)+document.documentElement.style.setProperty('--nav-width', '260px')，兼容 CSS 变量更新 - 若使用自定义主题，检查是否覆盖了
common.js中的resizeNavigation()函数——该函数负责监听resize事件并重设宽度，被删或注释会导致横屏后菜单无法自适应
缓存和 UA 识别干扰真实渲染
部分平板浏览器（尤其是 Safari iOS）会把横屏 UA 识别为桌面端，跳过移动端 JS 初始化；另一些则缓存了旧版 CSS，导致新加的媒体查询不生效。
立即学习“PHP免费学习笔记（深入）”；
- 强制刷新：Safari 中双击地址栏 → 粘贴 URL → 末尾加
?v=2或&t=20260730绕过 CDN 缓存 - 清空 phpMyAdmin 服务端临时文件：
rm -rf /var/lib/phpmyadmin/tmp/*（路径依安装方式而定），否则主题 CSS 可能被缓存编译版本覆盖 - 禁用浏览器“请求桌面网站”选项——虽然横屏更接近桌面尺寸，但 phpMyAdmin 的响应式逻辑依赖移动 UA 触发初始化脚本
真正卡住的往往不是 CSS 写多少，而是横屏时 JS 没拿到正确视口尺寸、CSS 没匹配到对应断点、缓存又挡在中间——三者任一缺失，都会让界面看起来“少了一块”。动手前先开 DevTools 看 computed styles 和 console 报错，比直接改代码更省时间。
