触摸与点击区域
WCAG 建议：可点击元素至少 44×44 CSS 像素（约 9mm），手指才容易点中。移动端常见问题是操作区域太小：图标 16px、链接挤在一起、删除按钮只有一个字。
用 padding 撑大命中区域即可，图标视觉大小不变：padding: 12px + 背景透明。另外移动端 click 有 300ms 延迟，现代浏览器 viewport 正确时已无此问题。
- 命中区域 ≥ 44×44px，用透明 padding 撑大
- 相邻可点元素间距 ≥ 8px，防误触
- touch-action: manipulation 可消除部分点击延迟
CSS
/* 图标视觉 16px，命中区 40px+ */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; /* 命中区域 */ background: none; border: none; cursor: pointer; } .icon-btn svg { width: 16px; height: 16px; } /* 列表行：整行可点，手指任意位置都行 */ .list-item { display: block; padding: 14px 16px; } /* 消除双击缩放带来的延迟 */ button, a { touch-action: manipulation; }
本节要点移动端铁律：命中区域 ≥44px、间距 ≥8px、touch-action: manipulation。
