css无法直接检测“是否有触摸屏”，只能通过@media (pointer: coarse)判断主输入是否为粗精度，或@media (hover: none)判断是否支持悬停，二者联用可贴近触屏交互场景。
不能用 CSS 直接检测“是否有触摸屏”，只能检测当前主输入设备是否为粗精度指针（如手指）或是否支持悬停——这才是浏览器真正能可靠上报的能力。
@media (pointer: coarse) 是最接近的可用方案
它不问“有没有触摸屏”，而是问“当前活跃的主输入方式是不是粗粒度”，比如手指点按。绝大多数纯触屏设备（iPhone、Android 手机、iPad 默认）都会匹配 @media (pointer: coarse)。
- ✅ 正确写法：
@media (pointer: coarse)—— 必须带值，漏掉: coarse会整个规则失效 - ⚠️ 它不是布尔开关：Surface Pro 插着鼠标时可能不匹配；连蓝牙鼠标后 iPad 也可能从
coarse切到fine - ❌ 不要混用
any-pointer：它只要系统里存在任意粗精度设备就命中（比如 Surface 配了触控笔），容易误判 - ? 典型用途：增大按钮点击区域（
min-height: 48px）、禁用纯:hover触发的菜单、移除悬停过渡动画
@media (hover: none) 才是判断“无悬停能力”的关键
很多开发者误以为这是“移动端检测”，其实它是判断设备是否具备维持 :hover 状态的能力。iOS 和 Android 默认返回 hover: none，因为手指没有悬停模型。
- ✅ 可靠性高：比
max-width或 UA 字符串强得多，渲染前就生效，Chrome 51+ / Firefox 62+ / Safari 14.1+ 全支持 - ❌
@media (max-width: 768px)会把带触控屏的 Windows 笔记本也当“移动端”，导致 hover 卡住 - ❌
'ontouchstart' in window是 JS 运行时特性检测，桌面 Chrome 开发者工具、Linux 浏览器都可能返回true，不能用于 CSS 分支 - ? 常和
pointer: coarse联用：@media (hover: none) and (pointer: coarse)更贴近典型触屏交互场景
为什么不能组合出“纯触摸屏”判断？
浏览器根本不暴露“是否有物理触摸屏”这个硬件信息。它只上报当前输入能力状态，而这个状态是动态的、可切换的。
- Surface Pro 同时有触摸屏和鼠标 → 主输入可能是
fine，也可能切回coarse - iPad 连键盘+鼠标后，
pointer可能变fine，但屏幕仍是触控屏 - 某些游戏手柄、遥控器也会触发
pointer: coarse，它们显然不是“触摸屏” - 旧版 Android WebView（如 4.4）压根不支持
pointer，需 fallback 到max-width或 JS 补充
实际样式适配建议
别试图用 CSS 做设备分类，直接针对输入行为写样式：
- 按钮热区：
padding在@media (pointer: coarse)下加到至少16px - 下拉菜单：
@media (hover: hover) and (pointer: fine)内写:hover展开逻辑，外面用 JS 或点击事件兜底 -
:active必须写，且 iOS Safari 要求元素有cursor: pointer或绑定touchstart才触发 - 过渡动画：
transition一定要包进@media (hover: hover) and (pointer: fine)，否则移动 Safari 可能意外执行
真正可靠的判断永远在运行时：用户点下去那一刻，pointerdown 的 event.pointerType 才告诉你这次操作到底来自手指还是鼠标。CSS 媒体查询只是静态快照，别指望它覆盖所有切换场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
