根本原因是默认禁用响应式布局，需在config.inc.php中$cfg['Servers']配置块后添加$cfg['Responsive'] = true;并重启Web服务、清除浏览器缓存、确认viewport标签存在且正确。
phpmyadmin 4.0 的导出界面排版错乱，根本原因是默认禁用响应式布局，且未适配小屏或高缩放场景下的 css 计算逻辑——不是 bug，是配置开关没打开。
必须启用 $cfg['Responsive'] = true;
4.0 版本虽已内置响应式能力，但$cfg['Responsive']默认为false，所有媒体查询、折叠导航、弹性列宽都不会触发。不改这一项，其他样式调整全是徒劳。
- 编辑
config.inc.php，在$cfg['Servers']配置块之后、?>之前添加：$cfg['Responsive'] = true; - 别加在
$cfg['Servers'][$i]内部，否则无效 - 改完必须重启 Apache 或 reload 配置，仅刷新页面不生效
清除浏览器缓存并验证 viewport 是否生效
phpMyAdmin 4.0 的 CSS 依赖?v=4.0.10类版本参数控制缓存，本地改了配置但 URL 没变，浏览器仍加载旧 CSS，导致“明明开了 responsive 却没反应”。
- 用 Chrome DevTools 的「Toggle device toolbar」模拟手机访问，右键「查看网页源代码」，搜索
viewport - 确认存在且拼写正确：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 若缺失或含
intial-scale等错字，需手动补全——iOS Safari 会直接忽略该标签 - 强制刷新：Windows/Linux 按
Ctrl + F5，macOS 按Cmd + Shift + R
避免导出按钮点击后 DOM 重排引发的宽度塌陷
导出操作常触发 loading 提示插入或容器清空（如innerHTML = ''），导致父级 flex 容器重新计算子元素宽度，pre.sql-preview被压缩到几像素宽。
- 检查导出 JS 逻辑中是否用了
innerHTML清空代码框；改为textContent = ''，保留原有样式节点 - 若使用高亮库（如 highlight.js），确保
highlightElement()在 DOM 稳定后执行，而非 click 后立刻调用 - 临时加调试语句：
console.log(getComputedStyle(document.querySelector('pre.sql-preview')).width)，确认点击前后是否突变
最易被忽略的是：phpMyAdmin 4.0 对max-width: 100%的依赖极强，任何外层容器（比如.container-fluid）漏设该属性，都会让预览框在窄屏下直接溢出或截断——不是样式写得不够多，而是这一条没兜底。
立即学习“PHP免费学习笔记（深入）”；
