html5通过@media的pointer和hover媒体特性识别输入方式：pointer: fine/ coarse区分指针精度，hover: hover/ none判断悬停能力；推荐组合@media (pointer: coarse) and (hover: none)适配触控，@media (pointer: fine) and (hover: hover)适配鼠标，并注意ios safari桌面模式下hover的不可靠性。
HTML5 本身不直接区分触控或鼠标设备，但现代浏览器通过 @media 媒体查询中的 交互式特性媒体功能（如 hover、pointer）可间接识别输入方式倾向，从而为触控设备和鼠标设备提供差异化的交互样式。关键不是检测“是否是手机”，而是判断“当前主要输入机制是否支持悬停”或“指针是否精细”。
用 pointer 和 hover 组合判断设备能力
这两个媒体特性是 W3C 推荐的标准方案，比检测屏幕尺寸或 UA 字符串更可靠、语义更清晰：
-
pointer: fine：表示有高精度指针（如鼠标、触控笔），支持精确点击和悬停 -
pointer: coarse：表示粗粒度指针（如手指触控），通常不支持真正意义上的悬停，点击区域需更大 -
hover: hover：表示设备支持持续的悬停状态（即鼠标移入后能稳定维持:hover） -
hover: none：表示设备不支持可靠的悬停（多数触屏设备，包括 iPad 的 Safari 在非桌面模式下也返回none）
推荐组合写法：
@media (pointer: coarse) and (hover: none) {
/* 面向触控设备的样式 */
.btn { padding: 16px; font-size: 18px; }
.tooltip { display: none; } /* 触控端隐藏依赖 hover 的提示 */
}
<p>@media (pointer: fine) and (hover: hover) {
/<em> 面向鼠标/触控板设备的样式 </em>/
.btn:hover { background-color: #e6f7ff; }
.tooltip { opacity: 0; transition: opacity 0.2s; }
.btn:hover + .tooltip { opacity: 1; }
}</p>
适配按钮按压反馈的差异处理
触控设备没有“按下又不松开”的中间态，:active 持续时间极短；而鼠标设备可稳定维持 :active。因此，视觉反馈策略应不同：
- 触控端优先强化
:active瞬时反馈（如快速变色、scale(0.98)），避免依赖:hover - 鼠标端可结合
:hover+:active构建两层反馈（悬停预示、按下确认）
示例：
@media (pointer: coarse) {
.btn:active {
background-color: #005cbf;
transform: scale(0.98);
transition: all 0.05s ease;
}
}
<p>@media (pointer: fine) {
.btn:hover {
background-color: #d0e8ff;
}
.btn:active {
background-color: #005cbf;
transform: translateY(1px);
}
}</p>
响应式触摸目标尺寸与焦点可见性
触控设备要求最小点击区域 ≥ 48×48px（WCAG 推荐），且无依赖悬停的交互必须提供键盘焦点支持：
- 对所有可交互元素（如
<div class="card">）添加 <code>tabindex="0" - 用
:focus替代或补充:hover样式，确保键盘用户获得同等反馈 - 在
(pointer: coarse)下强制增大min-height和padding
例如：
@media (pointer: coarse) {
[tabindex="0"] {
min-height: 48px;
padding: 14px 20px;
}
}
<p>/<em> 同时支持鼠标悬停与键盘聚焦 </em>/
.btn:hover,
.btn:focus {
outline: 2px solid #4096ff;
outline-offset: 2px;
}</p>
注意移动端 Safari 的特殊行为
iPadOS 和 iOS Safari 在桌面模式（请求桌面站点）下可能返回 hover: hover，但实际触控操作仍无法触发稳定悬停。因此：
- 不要仅靠
hover: hover启用复杂悬停菜单——它可能在触控时意外展开又立即关闭 - 对重要交互（如下拉菜单、工具提示），建议用 JavaScript 监听
click或touchstart主动控制显隐，CSS 媒体查询只负责基础样式适配 - 可加一层防御性判断：
@media (pointer: coarse), (hover: none)覆盖更广的触控场景
不复杂但容易忽略。
