圆点点击范围必须≥44×44px才符合触控标准，因浏览器会将小尺寸区域（如10×10px）判定为不可点击；推荐用::before伪元素撑开热区，或改用button标签，避免仅靠padding扩展导致裁剪或失效。
圆点点击范围不够，根本不是“加个 padding 就完事”的问题——它直接导致移动端误触、焦点丢失、无障碍失败。核心矛盾在于：浏览器渲染的圆点本身（比如 width: 8px; height: 8px;）物理尺寸远低于触控安全阈值。
为什么默认圆点在手机上点不中
Chrome 和 Safari 在移动端会将小尺寸点击区域自动“吸附”到最近可交互元素，但前提是该元素有足够最小包围盒。Apple HIG 和 WCAG 2.2 明确要求：可点击区域物理尺寸 ≥ 44×44px。而多数轮播图圆点 CSS 写的是 width: 10px; height: 10px; border-radius: 50%;，实际热区只有 10×10px，连标准的 1/4 都不到。
- 用户反复点击却无响应，其实是事件没触发，不是 JS 逻辑错
- 用
padding扩展时若父容器overflow: hidden，padding 区域会被裁剪，白加 - 部分框架（如 Bootstrap 5）圆点是
[data-bs-target]按钮，不是li，选错标签名会导致样式完全不生效
真正有效的圆点热区放大三法
必须同时满足：视觉不突兀 + 点击可靠 + 不破坏布局流。推荐按优先级使用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
首选：用
::before伪元素撑开热区 —— 视觉仍是小圆点，但点击区域是 44×44px 的透明层
示例：`.dot::before { content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; transform: translate(0, 0); }` -
次选：改用
button标签替代span/li—— 原生按钮自带最小尺寸保障，且支持:focus-visible和屏幕阅读器
注意：需移除所有float或display: inline-block，改用display: flex+gap排列 -
慎用：扩大
padding+overflow: visible—— 仅当父容器明确允许溢出且无遮罩时可用，否则在 iOS Safari 中可能被截断
Bootstrap 5 圆点间距和热区冲突怎么解
很多人想调 gap 却发现热区没变大，是因为 gap 控制的是元素间距离，不是单个元素尺寸。两者必须分开处理：
立即学习“前端免费学习笔记（深入）”；
-
.carousel-indicators { gap: 12px; }→ 只影响圆点之间的空隙 -
.carousel-indicators [data-bs-target] { width: 44px; height: 44px; padding: 0; }→ 才真正扩展点击区域 - 若用了
border-radius: 50%，记得同步设border-box盒模型，避免padding导致圆变椭 - 切勿混用
margin和gap，尤其在 RTL 页面里，margin-right会翻转方向，gap不会
最常被忽略的一点：热区扩大后，相邻圆点之间如果间隙太小（比如 gap: 4px），手指滑动时极易连续触发两个点击。移动端至少留 8px 净间隙，且圆点自身热区中心要对齐视觉圆心——偏移超过 2px 就会影响精准度。
