最可靠方式是@media (hover: none)and(pointer: coarse)，它不依赖JS、渲染前生效，且同时满足“无悬停能力”和“主输入为手指”两个条件，精准逼近“此刻只能触控”状态。
不能只靠屏幕尺寸或 UA 字符串判断是否支持触控，真正可靠的方式是用 @media (hover: none) and (pointer: coarse) 组合条件 —— 它不依赖 JS，渲染前就生效，且能逼近“此刻只能靠手指操作”的真实状态。
为什么 @media (pointer: coarse) 单独不够用
它只表示当前主输入设备是粗粒度（比如手指），但可能被遥控器、游戏手柄甚至某些触控笔触发；更关键的是，iPad 连蓝牙鼠标后，pointer 会从 coarse 切到 fine，单靠它无法锁定触控场景。它适合调点击区域大小，不适合当“是否支持触控”的开关。
-
pointer: coarse在 Surface 插着鼠标时仍可能返回 true（因屏幕物理支持触控），但用户实际在用鼠标 - 某些 Android TV 或智能投影仪也匹配
pointer: coarse，却不是典型触控交互设备 - 该特性值会动态变化，CSS 媒体查询本身不会自动响应这种切换
为什么 @media (hover: none) 也不能单独用
hover: none 只说明设备没有悬停能力，但不等于“正在触控”：旧版 Samsung Internet 错误报告 hover: hover，导致漏判；Windows 触控笔记本接鼠标时仍返回 hover: hover，哪怕你正用手指点屏幕。它判断的是能力模型，不是输入行为。
- 仅靠
hover: none会把某些带触控屏的桌面浏览器（如 Linux 上的 Chromium）误判为纯触控设备 - 它不区分“无悬停能力”和“有悬停能力但当前未激活”，后者在混合设备上很常见
- W3C 明确规定
(hover: hover)和(pointer: coarse)互斥，所以@media (hover: hover) and (pointer: coarse)永远不匹配
必须组合写成 @media (hover: none)and(pointer: coarse)
两者同时成立，才真正逼近“此刻只能触控”的逻辑：hover: none 排除有悬停能力的设备，pointer: coarse 确认主输入是手指。注意 and 前后不要加空格，某些旧版 Safari 对空格敏感。
立即学习“前端免费学习笔记（深入）”；
- 这个组合在 Chrome 51+、Firefox 62+、Safari 14.1+ 全面支持，iOS 13.4+ 和 ChromeOS 已修复早期误报问题
- 实用示例：
@media (hover: none)and(pointer: coarse) { .btn { min-width: 48px; min-height: 48px; padding: 12px 20px; } .nav-link { margin-bottom: 8px; } .tooltip:hover { display: none; } } - 别写成
@media (hover: none) and (pointer: coarse)—— 多余空格在 Safari 13.1 之前会导致整个规则失效
媒体查询是静态快照，动态切换得靠 JS 监听
CSS 媒体查询只在页面加载时求值一次。用户在 iPad 上先用鼠标，再拔掉改用手指，样式不会自动更新。这点最容易被忽略，却是触控体验的关键分水岭。
- 用
window.matchMedia("(hover: none)and(pointer: coarse)")初始化检测，并监听change事件 - 配合
pointerdown事件做临时标记（event.pointerType === 'touch'），比监听touchstart更可靠（iOS 已限制其触发时机） - 不要用
'ontouchstart' in window驱动样式 —— Chrome 桌面版、Edge 模拟器都返回 true，但物理上根本不支持触摸
