@media (pointer: coarse) 不等于“是手机”，它仅表示主输入设备为低精度指针（如手指触控），桌面触控设备（如Surface）也会匹配，需结合 hover 判断输入能力，适用于调整控件尺寸与交互逻辑，而非设备类型识别。
为什么 @media (pointer: coarse) 不等于“是手机”
它只说明当前输入设备的指针精度低，比如手指触控或触控笔，但不区分操作系统、屏幕尺寸或是否为移动浏览器。桌面设备接了触控屏（如 Surface）也会命中该媒体查询，而某些带触控的 Chromebook 可能同时支持 coarse 和 fine（多模态），此时需配合 hover 判断。
-
pointer: coarse表示主输入设备是低精度指针（典型为手指），pointer: fine表示高精度（鼠标、触控笔） - 单靠它无法判断是否为“移动端”，
@media (max-width: 768px)或user-agent检测仍是补充手段 - 部分 Android 浏览器（尤其旧版 WebView）不支持该特性，可查 caniuse 确认兼容性
@media (pointer: coarse) 的典型使用场景
它最适合用于调整交互控件尺寸和间距，而非切换整个布局。例如增大按钮点击区域、放宽 hover 样式依赖、禁用纯悬停触发的下拉菜单。
- 按钮最小尺寸设为
48px × 48px（符合 WCAG 触控建议）：button { min-width: 48px; min-height: 48px; } - 移除仅靠
:hover显示的子菜单，改用点击展开 - 避免在
coarse下设置transition: all .2s，因手指操作响应延迟更明显，过渡易显卡顿
容易踩的坑：嵌套、覆盖与 JavaScript 同步
媒体查询本身无状态，但样式一旦生效，不会自动回退——如果用户拔掉触控屏或切换输入设备，浏览器未必实时重算媒体查询（尤其桌面端）。JS 监听也受限于 API 支持。
- 不要在
@media (pointer: coarse)内覆盖全局字体大小，这会导致非触控设备用户缩放异常；应仅调整交互相关属性 - 若同时写
@media (pointer: coarse) and (hover: none)，注意部分 iOS Safari 会报告hover: none即使支持悬停（因 Safari 的 hover 实现逻辑特殊） - JS 中无法直接读取
pointer值，只能用window.matchMedia监听：const mql = window.matchMedia('(pointer: coarse)');<br>mql.addEventListener('change', e => console.log(e.matches));
替代方案与组合建议
单一 pointer: coarse 覆盖面有限，真实项目中常组合使用。重点不是“识别设备”，而是“适配输入方式”。
立即学习“前端免费学习笔记（深入）”；
- 优先组合
@media (pointer: coarse) and (hover: none)—— 更可靠地表示“纯触控无悬停能力” - 避免用
@media (any-pointer: coarse)，它只要任一连接设备满足即匹配（比如笔记本连了蓝牙鼠标+触控屏，仍可能命中） - 服务端 UA 检测不能替代 CSS 媒体查询，因为同一设备（如折叠屏）可能横竖屏下输入方式不同，CSS 是唯一能响应运行时变化的方式
