@media (pointer: coarse) 无法优化移动端点击区域，因其在真机上恒为 coarse、不响应外设切换、旧浏览器不支持；真正有效的是增加 padding、min-width/min-height 及正确事件绑定。
不能用 @media (pointer: coarse) 优化移动端触摸点击区域——它不随用户操作变化，也不反映真实触控行为，加了也白加。
为什么 pointer 媒体查询在真机上基本没用
绝大多数手机和平板浏览器（包括 iOS Safari 13.4+ 和 Chrome for Android）固定返回 pointer: coarse，哪怕你正用蓝牙鼠标操作 iPad。这不是 bug，是规范定义：手指属于“粗粒度输入”，所以 @media (pointer: fine) 在纯触屏设备上永远不会匹配。
更现实的问题是：Android WebView、旧版 Samsung Internet 根本不支持 pointer 特性，整条媒体查询会被忽略；而 iOS Safari 即使接了 Apple Pencil，也只在配合 hover 和 any-pointer 时才可能区分，单用 pointer 没法触发重排或响应操作切换。
-
@media (pointer: coarse)不随屏幕旋转、缩放或外设插拔实时更新（部分浏览器压根不监听） - 它不阻止点击失灵、不修复 300ms 延迟、也不影响
touchstart是否被捕获 - 写
.btn { padding: 12px; }放在里面，和直接写全局样式效果完全一样
真正该用的媒体查询是 @media (hover: hover) and (pointer: fine)
这条组合才是识别“当前操作是否来自鼠标/触控笔”的可靠方式，能安全启用悬停菜单、小尺寸控件或右键样式，同时自动排除手指触摸场景。
立即学习“前端免费学习笔记（深入）”；
但注意：它和“扩大点击区域”无关。你需要的不是判断输入类型，而是确保按钮本身有足够物理尺寸来响应手指点击。
- 别把它当点击热区开关——
hover+fine只控制视觉反馈，不改变可点击范围 - 如果用了它来降级 padding，反而会让小屏按钮更难点击（比如把
padding: 16px改成12px） - 它在微信 X5 内核、UC 等老环境里基本被忽略，只能作渐进增强，不能当功能依据
移动端点击区域优化，只靠三件事
加 padding、设 min-width/min-height、补 role="button" 和 touchstart 监听——这些不依赖任何媒体查询，且真机可验证。
- 按钮必须是
display: block或inline-block，否则padding垂直方向无效 - 推荐起手值：
padding: 12px 20px（上下 12px + 行高 ≈ 44px），再加min-width: 44px和min-height: 44px兜底短文本 - 删掉所有
user-select: none和意外的touch-action: none，后者会直接禁用点击 - iOS Safari 要想
:active生效，得绑定touchstart或设role="button"+tabindex
最常被忽略的点是：写了 padding，却没检查父容器是否设置了 overflow: hidden 或 pointer-events: none，导致 padding 区域的点击事件根本传不到目标元素。真机测试前，先用 Safari 的「Element Inspector」点开目标元素，确认 computed styles 里 pointer-events 是 auto，且没有上级截断事件流。
