phpMyAdmin平板横屏显示不全怎么办-phpMyAdmin-PHP中文网

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 未被读取应用。

PHP

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

确保 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，导致新加的媒体查询不生效。

强制刷新：Safari 中双击地址栏 → 粘贴 URL → 末尾加 ?v=2 或 &t=20260730 绕过 CDN 缓存
清空 phpMyAdmin 服务端临时文件：rm -rf /var/lib/phpmyadmin/tmp/*（路径依安装方式而定），否则主题 CSS 可能被缓存编译版本覆盖
禁用浏览器“请求桌面网站”选项——虽然横屏更接近桌面尺寸，但 phpMyAdmin 的响应式逻辑依赖移动 UA 触发初始化脚本

真正卡住的往往不是 CSS 写多少，而是横屏时 JS 没拿到正确视口尺寸、CSS 没匹配到对应断点、缓存又挡在中间——三者任一缺失，都会让界面看起来“少了一块”。动手前先开 DevTools 看 computed styles 和 console 报错，比直接改代码更省时间。