移动端触控交互需以44×44px为最小触控目标，用min-width/min-height和padding保障物理点击区，避免overflow裁剪、DOM层级错位及margin合并问题，优先采用@media (pointer: coarse)适配触控能力。
移动端触控交互不能只靠“加个媒体查询”就完事——44px 是底线，不是标准；误触不是用户手滑，是布局没隔离。
触控目标尺寸必须≥44×44px，但别只改width和height
很多开发者直接给按钮设 width: 44px; height: 44px，结果在高DPI屏上依然难点准。问题出在：CSS像素 ≠ 物理像素，而手指按压有面积、有偏移。
- 用
min-width和min-height替代固定宽高，确保即使内容收缩也不缩水 - 给按钮外层加
padding（比如padding: 12px 20px），再配合box-sizing: border-box，让点击区真正可扩展 - 避免仅靠
font-size撑大按钮——小字号文字+大内边距比大字号+小内边距更易读、更稳 - 检查是否被父容器的
overflow: hidden或transform裁剪了点击区域（Inspect 模式下看 bounding box 是否完整）
flex 布局中垂直堆叠导致的误触，本质是 DOM 层级错位
在 @media (max-width: 600px) 下把 flex-direction: row 改成 column，常引发“点按钮却跳转链接”的问题。这不是 CSS 写错了，而是两个元素共用一个 flex 容器，视觉上分离，DOM 上仍紧邻，鼠标悬停检测命中了上方元素的扩展边界盒。
- 把功能不相关的交互元素（如分享链接
<a>和操作按钮<button>）拆到不同容器，各自独立参与流式布局 - 对需要堆叠的按钮组，用
gap替代margin，避免 margin 合并导致间距失效 - 禁用
position: relative; top: 0这类无意义偏移——它会干扰浏览器计算点击热区 - 在移动端断点里加
* { touch-action: manipulation; }，减少 300ms 延迟带来的误判
响应式断点要匹配真实设备交互特征，不是拍脑袋定 768px
768px 是 iPad 竖屏宽度，但很多安卓平板实际视口宽度是 800px 或 812px；而部分折叠屏手机展开后可达 900px，却仍需触控优化。硬套断点会导致“看似桌面、实为触控”的体验断裂。
立即学习“前端免费学习笔记（深入）”；
- 优先用
pointer: coarse媒体查询判断触控能力：@media (pointer: coarse) { /* 触控专属样式 */ } - 结合
hover: hover判断是否支持悬停，避免在触控设备上加载 hover 样式造成冗余 - 对关键操作区（如表单提交、删除按钮），单独加一层
@media (max-width: 500px)强化尺寸与间距，覆盖小屏手机主力场景 - 不要依赖设备 UA 判断——现代浏览器已普遍屏蔽精确 UA 暴露，
window.matchMedia才是可靠依据
最常被忽略的一点：触控优化不是“做完响应式再补”，而是从第一个按钮写起就要考虑手指落点。当你在桌面端调试时发现某个按钮“刚好能点中”，那它在手机上大概率已经失效了——因为你的光标是 1px，而手指不是。
