移动端点击区域太小且padding无效，主因是pointer-events或touch-action拦截事件；需检查父容器是否设pointer-events:none、touch-action:none，并确保.page-link等元素满足min-width/min-height≥44px且aria-disabled与disabled同步更新。
移动端点击区域太小，padding 加了没反应？先查 pointer-events 和 touch-action
不是 padding 没生效，而是点击事件被拦截了。常见原因有：
• 父容器或自身设置了 pointer-events: none（比如轮播图、弹窗遮罩层残留）
• 容器加了 touch-action: none（尤其在自定义滑动组件里）
• user-select: none 虽不阻止点击，但可能干扰某些手势识别逻辑
用 chrome devtools 选中 .page-link 元素，在「computed」面板直接看这两个属性的实际值，别只信 css 文件里的声明
pagination-sm 在手机上反而更难点击？因为热区没同步扩大
pagination-sm 只缩放视觉尺寸，不自动增加触摸热区——它把 padding 设为 0.375rem 0.75rem（约 6px × 12px），远低于 iOS/Android 推荐的最小 44×44px 触摸目标。
解决办法：
• 给 .page-link 补 min-width: 44px 和 min-height: 44px
• 或直接改 padding：比如 padding: 0.5rem 0.75rem（≈8px×12px），再配合 min-width
• 避免只调 font-size，否则文字和背景错位，行高不匹配会导致文字贴顶
想让分页按钮在移动端“更大更准”，别只依赖 pagination-lg
pagination-lg 在手机上容易挤出屏幕、遮挡内容，不是万能解。真正有效的是：
• 把 .page-link 的 padding 单独放大（如 0.75rem 1rem）
• 加 border-radius: 4px 让边缘更易触达（原生 0.3rem 太小）
• 用媒体查询限定：只在 max-width: 768px 下生效，桌面端保持默认
• 注意 line-height 必须同步调高，否则文字垂直居中失效，看起来像“悬空”
动态启用/禁用分页项时，disabled 和 aria-disabled 必须一起改
移动端 VoiceOver 或 TalkBack 会读 aria-disabled="true"，但只写 HTML disabled 属性，JS 动态切换时它不会自动同步到 ARIA 属性。
结果就是：视觉上灰了，但读屏软件仍提示“可点击”。
正确做法：
• JS 更新时，同时设 el.setAttribute('disabled', 'true') 和 el.setAttribute('aria-disabled', 'true')
• 同样，启用时两个都得删掉：el.removeAttribute('disabled') 和 el.removeAttribute('aria-disabled')
• 别用 opacity: .5 代替禁用状态，它对辅助技术完全不可见
事情说清了就结束。移动端点击区不是单纯“调大 padding”就能解决的事，得同时过三关：CSS 层是否被拦截、尺寸是否满足物理触摸阈值、可访问性属性是否实时同步。
