必须将a标签设为display: inline-block或block，再加padding（如12px 20px），才能真正扩大点击热区；仅靠font-size、line-height或margin无效，且需检查overflow、pointer-events等父级截断属性。

给 a 标签设 display: inline-block 再加 padding

纯文字链接默认是 inline 元素，padding 在上下方向无效，左右有效但无法撑开点击热区。必须先改成 inline-block 或 block，才能让 padding: 12px 20px 真正扩大可触控区域。
常见错误是只加 text-align: center 到父容器，却没改 a 自身的 display 类型，结果点击区域还是窄窄一条。

用 flex 居中时别漏掉 align-items 和 justify-content

如果父容器是 display: flex，仅靠 justify-content: center 只能水平居中，垂直方向仍可能贴顶或塌陷，导致上边 padding 被裁掉。
必须同时设置：

• align-items: center（确保垂直居中，避免文字紧贴容器顶部）
• height 或 min-height（防止容器高度坍缩，尤其在空内容或单行文本时）
• padding 放在 a 上，不是 flex 容器上（否则点击热区不跟随文字）

移动端至少保证 44×44px，别只靠字体大小撑

iOS 和 Android 的可访问性规范明确要求最小触控目标为 44 CSS 像素。仅靠 font-size: 16px + 默认行高，远达不到这个尺寸。
实操建议：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 直接给 a 设 padding: 12px 20px（上下 24px，左右 40px，合计 48×80px）
• 避免用 line-height: 1 压缩行高——它会让文字紧贴 padding 边界，触控容错率下降
• 禁用 transform: scale(1.2) 拉大文字：视觉变大，但点击区域不变

检查是否被 overflow: hidden 或 pointer-events: none 截断

这是最隐蔽的问题：代码看起来完全正确，点击区域却“少了一块”，控制台无报错，JS 事件监听也正常触发——其实热区被父级裁掉了。
典型场景：

• 导航栏用 overflow: hidden 清浮动，但 a 的 padding-top 溢出被剪掉
• 卡片组件加了伪元素遮罩层，又忘了设 pointer-events: auto 覆盖到链接上
• 微信内置浏览器里，touch-action: none 禁用了整个区域的点击响应

真正在意点击体验时，得一层层 inspect 元素，看 computed styles 里 pointer-events 和 overflow 的实际值。

立即学习“前端免费学习笔记（深入）”；