为确保链接点击区域达标，需对<a>设display: inline-block并添加padding；避免仅靠font-size或line-height撑高；检查父级overflow、pointer-events、touch-action等静默截断属性；禁用transform: scale()伪扩大；真机测试前确认touch-action: manipulation、无pointer-events: none、未误设user-select: none。
直接给 <a> 加 padding 并设 display: inline-block
默认的 <a> 是 inline 元素，padding-top 和 padding-bottom 在旧版 Safari 或某些 WebView 中可能被忽略，导致垂直热区缩水。必须显式声明 display: inline-block（或 block），再配 padding 才能真实扩大点击区域。
常见错误是只加 font-size 或 line-height：它们只撑开视觉高度，不扩展事件坐标映射范围。iOS Safari 实际可点高度可能仍卡在 16px 左右。
-
padding: 12px 20px+font-size: 14px通常就能满足 44×44px 最小触控要求 - 务必加
cursor: pointer，否则用户无法感知可点击 - 避免
line-height过小（如line-height: 1），文字紧贴边界会降低触控精度
检查父容器是否静默截断点击区域
最常被忽略的问题不是 JS 写错，而是 CSS 静默阻断：即使 <a> 自身样式完全正确，只要父级有 overflow: hidden、pointer-events: none 或 touch-action: none，点击热区就会被裁掉或禁用——控制台不报错，也不提示。
验证方法很简单：临时给父容器加 outline: 1px solid red，看是否完整包裹链接；再打开开发者工具检查 computed styles 中 pointer-events 和 overflow 的最终值。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden尤其容易在border-radius场景下意外裁切 padding 区域 -
touch-action: none在微信内置浏览器中会直接禁用点击穿透，需改为touch-action: manipulation - 若父级用了
position: absolute，确认z-index没被其他层遮挡
别用 transform: scale() 或图片拉伸来“假装”扩大
transform: scale(1.5) 只放大渲染像素，不改变元素的 content box + padding box 边界，所以点击热区不会变大，反而可能导致点击偏移、文字模糊。
同理，对 <img> 使用行内 width/height 属性只是缩放显示，不扩大实际可点击区域；应改用 CSS 的 min-width/min-height 配合 object-fit 控制。
- 图片链接里别换行或加空格：
<img src="...">\n可能在部分浏览器中渲染出额外空白，挤压热区 -
alt文本必须有意义，比如alt="点击加入会员"，否则屏幕阅读器读不出上下文 - 把
<img>塞进<a>是常用手段，但前提是<a>自身已通过padding和display扩大了热区
移动端真机测试前必须确认的三件事
模拟器看不出问题，但 iOS Safari 和 Android WebView 对点击热区更敏感。以下三项不检查，90% 的“点不中”问题都白调 JS。
- 是否加了
touch-action: manipulation？缺它会导致 300ms 点击延迟甚至无响应 - 是否所有相关层级（包括祖先）都未设
pointer-events: none？哪怕只有一层设了，整个链路就断了 -
<a>是否被user-select: none影响？某些 Android WebView 下会连带抑制 click 冒泡，建议只用-webkit-user-select: none+-moz-user-select: none，保留标准属性为text
