直接改 phpmyadmin/css/custom.css 最有效;需在 config.inc.php 中启用 $cfg['CustomCSS'] = 'css/custom.css';,并添加触控目标、viewport、字体、滚动及 !important 覆盖等适配规则。

为什么默认 phpMyAdmin 在 iPad 上点不准、缩放卡顿?
根本原因是 phpMyAdmin 的 CSS 没做响应式触控适配:按钮太小(12px 字体 + 4px 内边距)、表单控件未设置 touch-action: manipulation、viewport 缺少 user-scalable=no 控制,导致 Safari 频繁触发双击缩放和 300ms 点击延迟。
直接改哪个 CSS 文件最有效?
不要动 phpmyadmin/css/common.css 或框架层样式——它们会被更新覆盖。优先修改 phpmyadmin/css/custom.css(若不存在就新建),并在 config.inc.php 中确认已启用:
/* config.inc.php 中确保这行存在 */ $cfg['CustomCSS'] = 'css/custom.css';
这个文件由 phpMyAdmin 自动加载且不参与升级,改了就生效。
关键 CSS 修改项(实测 iPadOS 17+ 有效)
把以下规则粘贴进 custom.css,重点解决三类问题:
-
触控目标放大:所有
button、input[type="submit"]、.ajax类按钮最小尺寸设为44px(iOS 触控最小推荐值) -
禁用误缩放:给
body加touch-action: manipulation,并在的 viewport meta 中补全: -
字体与行高可读性:将
.table_results td和.navigation的font-size提到16px,line-height设为1.5,避免文字挤在一起看不清 -
滚动流畅性:对
.scrollable容器加-webkit-overflow-scrolling: touch(仅 Safari 有效)
改完还要注意什么?
phpMyAdmin 的某些界面(比如 SQL 执行框、结构页的索引编辑)用的是内联 style 或 JS 动态插入样式,custom.css 无法覆盖。这时得在 custom.css 末尾加 !important 强制生效,例如:
textarea, select, input[type="text"] {
min-height: 36px !important;
font-size: 16px !important;
}
另外,iPad 分辨率高但 DPR(设备像素比)常为 2,如果发现按钮边缘模糊,检查是否用了 border: 1px solid —— 改成 border: 0.5px solid 或用 box-shadow: 0 0 0 1px 替代,否则在 Retina 屏上会渲染成 2px 实线。
php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!











