移动端显示不完整源于css适配缺失：.navbar需flex-wrap、.table_container需overflow-x:auto、浮动类需转block；应通过custom.css添加带!important的媒体查询规则，并清除多层缓存验证效果。
移动端界面显示不完整，核心是 css 容器宽度和换行逻辑失效
phpmyadmin 5.2 默认的 common.css 对小屏缺乏基础适配：关键容器如 .navbar、.table_container 和 .tablinks 被设为固定宽度或浮动布局，且未启用 flex-wrap。结果就是顶部导航栏文字重叠、表格列被强制折行、操作按钮点击热区偏移——你看到的“显示不完整”，其实是内容被截断或错位，不是数据丢失。
- 用 Chrome DevTools 检查
<div class="navbar"> 元素，会发现其 <code>display: flex但没设flex-wrap: wrap，导致子项溢出容器不可见 -
.table_container缺少overflow-x: auto，整个表格被父级裁剪，横向滚动条不出现 - 所有带
float: left的类（比如.left、.formleft）在手机上会脱离文档流，造成表单控件堆叠或消失 - 确认
config.inc.php中有$cfg['CustomCSS'] = 'custom.css'; - 把自定义 CSS 放到
phpmyadmin/css/custom.css（路径需与配置一致） - 必须加
!important，否则原 CSS 的高权重选择器（如.navbar.navbar-default）会覆盖你的规则
改 common.css 还是用 custom.css？优先选后者
直接改 phpmyadmin/css/common.css 看似快，但升级后文件会被覆盖；而且 5.2+ 版本大量使用 CSS minify，手动改源文件容易因格式/权重问题失效。更稳妥的做法是启用 custom.css 并确保它被加载。
三处关键 CSS 规则必须加进 custom.css
只加媒体查询不够，得针对具体容器修复渲染行为。以下规则实测兼容 5.2.x–5.4.x，放在 custom.css 里即可生效：
/* 移动端基础适配 */
@media (max-width: 768px) {
.navbar {
flex-wrap: wrap !important;
justify-content: flex-start !important;
}
.left, .right, .formleft, .formright {
float: none !important;
display: block !important;
width: 100% !important;
}
.table_container table {
display: block !important;
overflow-x: auto !important;
white-space: nowrap !important;
}
}
-
.navbar加flex-wrap: wrap后，菜单项才真正换行，而不是溢出隐藏 - 所有
float类必须显式置为display: block，否则 iOS Safari 和安卓 Chrome WebView 会忽略float: none -
white-space: nowrap配合overflow-x: auto才能让长字段名横向滚动，而不是折成多行
改完 CSS 还是旧样式？别只清浏览器缓存
phpMyAdmin 通过 URL 参数（如 ?v=5.2.1）控制静态资源版本，浏览器可能仍加载带旧哈希的缓存 CSS。光清浏览器缓存不够，还得绕过服务端和中间层缓存。
- 在 phpMyAdmin 地址末尾手动加
&v=2（任意数字），强制刷新资源 - 检查 Nginx/Apache 是否启用了
expires指令，临时注释掉location ~* \.(css|js|woff2)$ { expires 1y; }类配置 - 若用了 CDN（如 Cloudflare），需清除其缓存，或临时暂停 CDN 直连源站验证
真正容易被忽略的是：很多用户改了 CSS 却没意识到 .table_container 是嵌套在 .container 和 #pma_main_page 里的，这三层都可能设了 max-width 或 overflow: hidden，单改一层根本撑不开。必须逐层 inspect，看哪一层真正截断了内容。
