pointer媒体查询检测输入设备的精细指向能力而非是否为触摸屏，需与hover搭配使用：(pointer: coarse) and (hover: none)才能准确识别纯触控设备。
pointer媒体查询不是用来检测“有没有触摸屏”的
很多人一看到 pointer 就默认它等于“手机/平板”，结果在 Surface 或 Chromebook 上写出一堆错误逻辑。实际上，pointer 查询的是**输入设备是否具备精细指向能力**，比如鼠标、触控笔；而 hover 才反映“悬停是否可用”。两者必须搭配使用才可靠。
常见错误现象：
只写 @media (pointer: coarse) 就给按钮加大点击区域，但没排除 hover 可用的场景，导致桌面端鼠标用户也看到超大按钮，破坏对齐和密度。
-
pointer: fine表示有高精度指针（如鼠标、触控笔），此时可放心用:hover和小尺寸控件 -
pointer: coarse表示粗粒度输入（如手指），必须配合hover: none才能准确锁定纯触控设备 -
pointer: none极少见，一般出现在无输入设备的 kiosk 或 TV 场景，通常可忽略
@media (pointer: coarse) and (hover: none) 是移动端触控优化的黄金组合
这个组合才能真正筛出“只能靠手指点、且无法悬停”的设备。单独用 pointer: coarse 会把带触控笔的 Windows 笔记本也归入其中，而它们其实支持 hover 和精确点击。
典型使用场景：
调整按钮最小尺寸、增大链接间距、禁用依赖 hover 的下拉菜单、替换 :hover 动效为 :focus 或点击态。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 按钮点击区域不小于
44px × 44px：用min-width: 44px; min-height: 44px;，别只靠 padding 堆 - 避免在
coarse + no-hover下依赖:hover显示二级菜单，改用点击展开 - 若必须保留悬停反馈，用
@media (hover: hover)单独包裹，确保不污染触控路径
别忘了 focus-visible 和 :focus 作为 hover 的替代方案
在 pointer: coarse 环境下，:hover 大概率无效或延迟触发，但用户点击后元素仍会获得焦点。这时候 :focus 和 :focus-visible 就成了关键替补。
容易踩的坑：
直接把 :hover 样式复制给 :focus，结果键盘用户看到所有可聚焦元素都亮着边框，视觉噪音极大。
- 优先用
:focus-visible（现代浏览器已广泛支持），它只在键盘导航时激活，不影响触控点击后的样式收敛 - 若需兼容旧浏览器，可用
outline: none配合 JS 检测KeyboardEvent来动态加类 - 触控点击后，建议用
transition: outline 0s瞬时清除 outline，避免残留光晕
性能与兼容性：不要在 pointer 查询里塞复杂计算
pointer 媒体查询本身开销极低，但它常被误用在动态样式切换中——比如监听 matchMedia 并频繁调用 getComputedStyle。这在低端 Android 设备上可能引发 layout thrashing。
更稳妥的做法是：
把响应逻辑收口到 class 层级，用 JS 一次性判断并打上 has-pointer-coarse 类，后续所有样式都基于该 class 编写。
示例：
if (window.matchMedia('(pointer: coarse) and (hover: none)').matches) {
document.documentElement.classList.add('has-pointer-coarse');
}
然后 CSS 里写：.has-pointer-coarse .btn { min-width: 44px; min-height: 44px; }
这样既避免重复查询，又让样式可预测、易调试。真正的难点不在怎么写 media query，而在于意识到：触控优化不是“加大一切”，而是重新设计交互节奏和反馈节奏。手指没有像素级精度，但人眼对视觉延迟极其敏感——一个 200ms 的点击反馈动画，比一个 44px 的按钮更能降低误操作率。
