ipad横屏时phpmyadmin导航栏与表格重叠，因默认css断点缺失（768–991px盲区），导致#navigation固定定位压住内容、.table-responsive在safari中overflow支持不一致；需在custom.css中添加针对性媒体查询修复body padding-top、#navigation top值及.table容器white-space等。
为什么 iPad 横屏时 phpMyAdmin 的导航栏和表格会重叠或错位
phpMyAdmin 默认未适配平板横屏的 1024×768 或 1366×768 类分辨率，CSS 媒体查询缺失或过于宽泛，导致 #navigation 和 #serverinfo 固定定位后压住主内容区，同时 .table-responsive 的 overflow 处理在 Safari 中对 table 子元素支持不一致。
- 常见现象：
Navigation左侧菜单遮挡顶部操作按钮，SQL 查询框被截断，表结构字段名换行错乱 - 根本原因：phpMyAdmin 5.x 默认只针对
max-width: 767px（手机）和min-width: 992px（桌面）设断点，横屏 iPad 落在中间“盲区”（768–991px） - 关键 CSS 类：
.container-fluid在中等宽度下未重设 padding，.navbar-fixed-top未配合body的padding-top动态调整
如何通过自定义 CSS 强制修复横屏布局（无需修改源码）
phpMyAdmin 支持加载用户自定义样式，路径为 ./custom.css（位于 phpMyAdmin 根目录），该文件会被自动注入到所有页面 中。只需添加针对性媒体查询即可。
- 覆盖默认断点：为
768px–1024px区间单独写规则，例如@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) - 修复导航遮挡：给
body增加padding-top: 50px，并重置#navigation的top值为50px - 防止表格溢出：对
.table父容器启用overflow-x: auto，并确保white-space: nowrap不影响字段名可读性 - 示例片段：
/* iPad 横屏适配 */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
body { padding-top: 50px !important; }
#navigation { top: 50px !important; }
.container-fluid { padding-left: 15px !important; padding-right: 15px !important; }
.table-responsive { overflow-x: auto; }
.table th, .table td { white-space: normal; }
}
为什么不能直接改 phpMyAdmin 的 vendor CSS 文件
phpMyAdmin 的核心 CSS（如 js/vendor/bootstrap/css/bootstrap.min.css）是构建时生成的压缩文件，手动修改会在升级后被覆盖；且其内部使用了 CSS 变量（如 --bs-body-font-size）和 flex 布局依赖，局部 patch 容易引发连锁错位。
- 升级风险：运行
sudo dpkg-reconfigure phpmyadmin或从源码更新时，css目录会被重置 - 作用域污染：直接修改
bootstrap.min.css会影响所有组件，比如意外改变.btn的圆角或阴影，破坏后台一致性 - 正确路径：只动
custom.css，用!important覆盖关键属性，保持最小侵入
哪些操作在 iPad 横屏下仍需手动规避
即使 CSS 修复完成，部分交互逻辑仍受限于 Safari 对 position: sticky 和 resize 的实现差异，以及 phpMyAdmin 自身 JS 未监听 orientationchange 事件。
- 避免在横屏下使用“结构”页的字段排序拖拽——Safari 的 touchmove 事件坐标计算偏差会导致排序图标错位
- SQL 执行结果页的“导出”下拉菜单可能被系统键盘顶起，建议先收起键盘再点箭头
- 不要依赖双指缩放查看长文本字段：phpMyAdmin 的
textarea使用了font-size: 12px固定值，缩放后行高不匹配，文字会重叠 - 若启用
$cfg['ShowHint'] = true，提示气泡在横屏下容易超出视口，建议临时关闭
横屏适配真正的难点不在样式覆盖，而在于 Safari 对 fixed 定位 + transform 组合渲染的不可预测性——哪怕加了 will-change: transform，某些 iPadOS 版本仍会闪屏。最稳的做法是把 custom.css 中的 transform 相关声明全删掉，老老实实用 top/left 偏移。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
