any-pointer 是 CSS 媒体特性，用于检测设备是否具备至少一种指针式输入设备，值为 none、coarse 或 fine，反映设备能力而非实时输入状态，需结合 any-hover 等特性精准适配混合设备。
any-pointer 是什么，它真能判断鼠标还是触摸？
any-pointer 是一个 CSS 媒体特性，用于检测设备是否具备「至少一种」指针式输入设备（比如鼠标、触控笔），但它不判断当前正在用哪种输入方式，也不反映用户此刻是否在触摸或悬停。它的值是 none、coarse 或 fine，分别对应：无指针设备、粗粒度指针（如手指）、细粒度指针（如鼠标/触控笔）。
-
any-pointer: none很少见，一般只出现在纯语音/键盘操作的嵌入式设备 -
any-pointer: coarse在手机、平板、带触摸屏的 Windows 笔记本上常见 -
any-pointer: fine多见于传统桌面浏览器（即使设备有触摸屏，只要鼠标可用，就倾向返回fine）
关键点在于：any-pointer 是设备能力描述，不是实时输入状态。它不会因为用户从摸屏切到插鼠标就动态切换样式。
怎么写才真正适配“有触摸但也有鼠标”的混合设备？
混合设备（如二合一笔记本、Surface、MacBook Touch Bar 机型）会让 any-pointer 返回 fine，哪怕用户正用手指点屏幕——这时单靠它会误判。
更靠谱的做法是组合使用：
立即学习“前端免费学习笔记（深入）”；
-
any-pointer: coarse→ 优先适配大点击区域、减少悬停依赖 -
any-hover: hover→ 表明设备支持可靠悬停（通常意味着有鼠标） - 两者叠加才能区分「纯触摸屏」和「可触摸+可悬停」设备
@media (any-pointer: coarse) and (any-hover: none) {
/* 真·触摸优先设备：按钮加大，隐藏 hover 效果 */
.btn { padding: 16px; }
.btn:hover { background: transparent; }
}
<p>@media (any-pointer: fine) and (any-hover: hover) {
/<em> 鼠标友好环境：保留 hover，支持小尺寸控件 </em>/
.btn:hover { background: #eee; }
}</p>注意：any-hover: none 不等于“没悬停”，而是“悬停不可靠”（比如手指悬停不触发，或触发后立刻点击）。
为什么用 pointer 而不是 hover 或 max-width 做响应？
很多人习惯用 @media (hover: hover) 或 @media (max-width: 768px) 来做输入适配，但这两种方式都有硬伤：
-
hover: hover在 macOS 触控板上默认返回hover，哪怕没接鼠标，导致触摸误判 -
max-width完全忽略输入方式，iPad Pro 和小屏笔记本宽度接近，但输入体验天差地别
any-pointer 的价值在于它直指输入精度这个底层维度：
-
coarse设备点击误差大，需要最小点击区域 ≥ 48×48px（WCAG 标准） -
fine设备可支持下拉菜单、工具提示、精确拖拽等交互
所以它不是“另一个媒体查询”，而是补充了「交互精度」这一缺失维度。
容易被忽略的兼容性和 fallback 问题
any-pointer 在 Safari 15.4+、Chrome 102+、Firefox 103+ 支持良好，但旧版 Safari（iOS 15.2–15.3）和部分安卓 WebView 会完全忽略该查询。
- 不要把它当作唯一判断条件；对关键交互（如表单提交、导航展开），仍需 JS 检测
'ontouchstart' in window或matchMedia回退 - 使用
@supports (any-pointer: coarse)包裹 CSS 可避免旧浏览器解析错误（虽然多数旧浏览器会直接跳过整条规则） - 如果你用 PostCSS 或构建工具，确认未启用 aggressive 的 CSS 压缩（有些插件会误删未知媒体特性）
最稳妥的实践是：用 any-pointer 做增强，用传统断点 + JS 做保底。比如按钮尺寸先按移动端设为 48px，再用 @media (any-pointer: fine) 缩小到 32px —— 这样即使不支持，也不会出错。
设备输入方式不是非黑即白的开关，而是一组重叠的信号。真正难处理的，永远是那些同时报出 coarse 和 hover 的设备，比如 Chrome on Android 启用“桌面版网站”时。这时候，any-pointer 给你的只是起点，不是答案。
