bootstrap分页组件在移动端不会自动缩放，点不准主因是触摸热区不足44×44px；需手动设置min-width/min-height、修复事件拦截、同步disabled与aria-disabled状态。

Bootstrap 分页组件不会在移动端自动缩放大小——它压根没有这个逻辑，所谓“自动缩放”全是错觉或外部干扰。

为什么加了 .pagination-lg 在手机上还是点不准

根本不是尺寸没变大，而是触摸热区（clickable area）太小。Bootstrap 的 .pagination-lg 只调 font-size、padding、line-height 和 border-radius，但不保证 min-width 和 min-height ≥ 44px。iOS/Android 推荐最小触摸目标是 44×44px，而 .pagination-lg 默认 padding 是 0.75rem 1.5rem（约 12×24px），远不够。

• 用 Chrome DevTools 选中 .page-link，在「Computed」里看实际 min-width 和 min-height，别信 CSS 文件里写的
• 检查父容器是否设了 pointer-events: none 或 touch-action: none（常见于轮播遮罩、弹窗背景）
• 确认 html { font-size } 没被媒体查询意外压缩（比如全局设成 12px，那 1.25rem 就只剩 15px）

怎么让分页按钮在手机上“真正变大可点”

别依赖 .pagination-lg 单独生效，得补足移动端关键约束：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

• 给 .page-link 加硬性限制：min-width: 44px 和 min-height: 44px
• 用媒体查询只在小屏生效：@media (max-width: 768px) { .page-link { padding: 0.75rem 1rem; border-radius: 4px; line-height: 1.6; } }
• line-height 必须同步调高，否则文字垂直居中失效，看起来像悬空
• 避免用 transform: scale() 或 zoom，会破坏点击坐标和辅助技术识别

动态禁用分页项时，disabled 和 aria-disabled 必须一起改

只写 disabled 属性，JS 动态切换后，VoiceOver/TalkBack 仍会读作“可点击”。视觉灰了，但读屏软件不知道你禁用了。

• 启用时：el.removeAttribute('disabled') + el.removeAttribute('aria-disabled')
• 禁用时：el.setAttribute('disabled', 'true') + el.setAttribute('aria-disabled', 'true')
• 绝对不要用 opacity: .5 替代禁用状态——对读屏软件完全不可见

真正起作用的从来不是“自动缩放”，而是明确控制热区尺寸、切断事件拦截、同步可访问性状态——这三件事漏掉任何一个，手机上就点不准。事情说清了就结束。