移动端点击区域应≥44×44px，需通过padding、min-width/min-height、display:inline-block/block等确保热区完整，并设置touch-action:manipulation和flex-shrink:0防压缩与延迟。
链接点击太小，手指点不中怎么办
移动端点击区域小于44×44px时，用户实际点击失败率明显上升——这不是手感问题，是CSS没给足padding或min-width/min-height。浏览器默认只把文字内容框当热区，a标签本身没有尺寸，纯靠内容撑开。
- 给
a或button加padding: 12px 16px（至少保证44px高宽），别只依赖font-size - 避免用
display: inline（默认值）去包裹可点击元素；改用display: inline-block或display: block，才能让padding生效 - 如果父容器有
overflow: hidden，且子元素靠padding撑出热区，可能被裁掉——检查computed样式里的border-box和overflow叠加效果
按钮热区被伪元素或图标挤占
用::before/::after加图标的按钮，或者background-image + text-indent: -9999px的“隐藏文字”写法，容易导致点击区域只剩图标大小，文字部分不可点。
- 确保整个按钮容器响应点击：给
button或a本身设width/height或padding，而不是只靠图标撑开 - 慎用
text-indent: -9999px；改用visually-hidden类（position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;）保留语义和可点击范围 - 如果用了
line-height垂直居中，但容器height没设够，实际热区仍按内容行高计算——直接设min-height: 44px更可靠
flex布局里按钮热区突然变窄
在display: flex容器中，子项默认flex-shrink: 1，遇到空间不足会压缩自身宽度，连带热区一起缩水，尤其在窄屏或动态内容下。
- 给可点击元素加
flex-shrink: 0，防止被挤压 - 避免只靠
flex: 1让按钮填满剩余空间——它会随内容变化收缩，热区不稳定；改用min-width: 120px之类兜底 - 检查是否误加了
white-space: nowrap又限制了width，导致文本溢出后热区只覆盖单行可见部分
触摸反馈延迟或不触发：不只是热区问题
即使热区足够大，iOS Safari 和部分安卓浏览器仍可能忽略点击，常见于未声明cursor: pointer、缺少touch-action或监听了click却没处理touchstart。
立即学习“前端免费学习笔记（深入）”；
- 给所有可点击元素加
cursor: pointer（桌面端提示）和touch-action: manipulation（告诉浏览器这是点击操作，跳过300ms延迟） - 不要只绑
click事件；如需JS交互，建议同时监听touchstart并preventDefault()，或用pointerdown统一处理 -
outline: none别乱删——移除焦点样式后，键盘用户和辅助工具就失去目标指示；改用outline: 2px solid #007aff配合outline-offset: 2px保持可访问性
热区不是加个padding就完事；它得在各种缩放、字体加载、动态内容、触摸策略下都稳住——最容易漏的是touch-action和flex-shrink那两处。
