移动端点不准的根源是热区未达44×44px标准，需用min-width/min-height+padding组合补足，并同步处理pointer-events、font-size缩放及ARIA状态。
移动端点不准，根本不是尺寸小，是热区没达标
Bootstrap 5 的 .pagination-sm 或 .pagination-lg 都不保证点击热区 ≥44×44px。iOS/Android 可触控最小目标是硬性标准，而 .page-link 默认 padding（如 0.375rem 0.75rem）换算后约 6×12px，远低于要求。Chrome DevTools 的「Computed」面板里看真实 min-width 和 min-height 值，别信 CSS 文件里写的。
- 检查父容器是否设了
pointer-events: none或touch-action: none（轮播遮罩、弹窗背景常见） - 确认
html { font-size }没被媒体查询意外压缩（比如全局设成12px，那1.25rem就只剩 15px） - 纯行内元素（如默认
a）必须先加display: inline-block，否则 vertical padding 无效
补热区必须用 min-width/min-height + padding 组合
只调 font-size 或只加 padding 都不行：前者会让文字和背景错位，后者在短文本（如“«”“»”）下宽度仍不足。真正起效的是明确声明尺寸约束：
- 给
.page-link加min-width: 44px和min-height: 44px—— 这是 iOS/Android 最小可触控标准 - 同步增大
padding，例如padding: 0.5rem 0.75rem（≈8×12px），再配合line-height: 1.5保证文字垂直居中 - 必须设
box-sizing: border-box，避免 padding 导致总宽高失控（Bootstrap 5 默认已启用，但若项目重置过 CSS，需手动补） - 慎用
border：它叠加在 padding 外，可能让总尺寸远超预期，在低分辨率屏上模糊
用媒体查询精准控制，别全局放大
.pagination-lg 在手机上容易挤出屏幕、遮挡内容，不是万能解。真正有效的是限定生效范围：
- 只在窄屏下放大热区：
@media (max-width: 768px) { .page-link { min-width: 44px; min-height: 44px; padding: 0.75rem 1rem; line-height: 1.4; } } - 加
border-radius: 4px（原生0.3rem ≈ 4.8px太小），让边缘更易触达 - 避免用
opacity: .5代替禁用状态——它对辅助技术完全不可见
JS 动态禁用时，disabled 和 aria-disabled 必须同步
视觉上灰了，但 VoiceOver/TalkBack 仍提示“可点击”，是因为只改了 HTML disabled 属性，没同步 ARIA 状态：
- 禁用时：同时执行
el.setAttribute('disabled', 'true')和el.setAttribute('aria-disabled', 'true') - 启用时：同时执行
el.removeAttribute('disabled')和el.removeAttribute('aria-disabled') - 不要依赖
class="disabled"或仅操作disabled—— 辅助技术读不到 class，JS 切换也不会自动同步 ARIA
事情说清了就结束。热区不足、事件被拦截、可访问性不同步——这三件事漏掉任何一个，手机上就点不准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
