响应式设计应通过 CSS 媒体查询 (pointer: coarse) 检测粗略指点能力以识别触控倾向，结合 (hover: none) 提高准确性，并用 JavaScript 监听输入变化动态更新 class；避免依赖 UA 字符串、ontouchstart 或 maxTouchPoints 等不可靠方法。
响应式设计不靠猜测设备型号，而是通过 CSS 媒体特性直接检测输入能力。检测“是否支持触控”的关键不是判断设备是不是手机或平板，而是看它有没有 粗略指点设备（finger-based input） —— 这正是触控操作的典型特征。
用 (pointer: coarse) 判断触控倾向
浏览器会根据主输入机制报告 pointer 特性值：
– coarse 表示输入精度低，如手指触摸；
– fine 表示高精度，如鼠标或触控笔；
– none 表示无指点能力（如仅键盘/语音）。
绝大多数触屏设备（iOS、Android、Windows 触控本）在未连接鼠标时都会匹配 @media (pointer: coarse)。
实用写法示例：
@media (pointer: coarse) {
.btn {
min-width: 48px;
min-height: 48px;
padding: 12px 20px;
}
.nav-link {
margin-bottom: 8px;
}
}
组合条件更可靠：(hover: none) and (pointer: coarse)
单看 pointer: coarse 可能误判（比如 Surface 插着鼠标但屏幕仍支持触控）；而 hover: none 表示设备 无法稳定触发悬停状态，这和纯触控场景高度吻合。
两者同时成立，基本可认定当前处于“以触控为主”的交互模式：
- 隐藏依赖 hover 的下拉菜单或 tooltip
- 增大点击目标区域（确保 ≥ 48×48px）
- 禁用 hover 动画，改用点击/触摸反馈
- 默认展开移动端导航，不依赖悬停展开
JavaScript 动态响应输入变化
CSS 媒体查询是静态快照，但用户可能热插拔鼠标或切换模式（如折叠 Surface 的键盘）。需用 JS 实时监听：
– 初始化检测：const hoverQuery = window.matchMedia("(hover: hover)");<br>const pointerQuery = window.matchMedia("(pointer: coarse)");
– 监听切换：hoverQuery.addEventListener("change", e => {<br> document.body.classList.toggle("supports-hover", e.matches);<br>});<br>pointerQuery.addEventListener("change", e => {<br> document.body.classList.toggle("uses-coarse-pointer", e.matches);<br>});
配合 class 控制行为，比 UA 字符串判断更准确、更面向能力。
不推荐的做法
– 仅靠 maxTouchPoints > 0 或 'ontouchstart' in window：现代桌面浏览器（Chrome/Firefox）即使没触屏也常启用 touch 事件，易误判；
– 用 UA 字符串识别 iPhone/Android：无法覆盖二合一设备、被用户代理伪装绕过、维护成本高；
– 单独写 :hover 样式而不包裹媒体查询：iOS Safari 点击后会残留伪类状态，造成交互异常。
