不能用css直接区分是否有触摸屏，但@media (hover: none) and (pointer: coarse)组合可逼近典型触屏交互场景，因其动态响应输入设备变化，比设备判断或ontouchstart更可靠。
不能用 CSS 直接区分“是否有触摸屏”，浏览器根本不暴露这个硬件信息；但可以用 @media (hover: none) 和 @media (pointer: coarse) 组合，逼近典型触屏交互场景。
为什么 @media (hover: none) 比设备判断更可靠
它检测的是当前主输入是否支持悬停——iOS、Android 默认返回 hover: none，iPad 不接外设时也如此。这意味着：:hover 样式不该被依赖，比如下拉菜单自动展开、按钮背景延迟变色都容易误触或卡住。
- ✅ 正确用途：禁用纯
:hover触发的浮层、移除悬停过渡动画、隐藏二级菜单 - ❌ 错误用途：当作“是手机”开关，比如写
@media (hover: none) { .nav { display: none; } }—— Surface Pro 插鼠标后仍匹配该规则，但用户明明在用鼠标 - ⚠️ 注意：Safari 15.4+ 才完整支持；旧版 iOS Safari 会跳过整个媒体块，属于安全降级，不用额外兜底
@media (pointer: coarse) 不是“触控开关”，而是精度提示
它表示当前主输入至少有一个是粗粒度设备（如手指），但不等于“正在用手指点”。Surface Pro 插着鼠标时可能不匹配，连蓝牙键盘后 iPad 可能从 coarse 切到 fine。
- ✅ 合理用途：增大点击区域（
min-height: 48px）、放宽padding、避免细线边框 - ❌ 单独使用风险：游戏手柄、遥控器也会触发
pointer: coarse，它们显然不是触摸屏 - ⚠️ 必须带值：
@media (pointer: coarse)写成@media (pointer)会整个失效
组合使用才是贴近真实触屏交互的关键
单独用任一特性都容易误判，但 @media (hover: none) and (pointer: coarse) 能覆盖绝大多数纯触屏场景（iPhone、未接外设的 Android 手机、默认状态的 iPad）。
- ✅ 示例：
@media (hover: none) and (pointer: coarse) { .btn { min-height: 48px; padding: 12px; } .dropdown:hover .menu { display: none; } /* 禁用 hover 展开 */ } - ⚠️ 不要混用
any-pointer：它只要系统里存在任意粗精度设备就命中（比如 Surface 配了触控笔），极易误判 - ⚠️ 动态切换必须被设计进 CSS：iPad 插上妙控板后，
(hover: hover)会立刻生效，你的:hover样式得能“热插拔”，不能假设“移动端永远固定”
别用 'ontouchstart' in window 驱动 CSS 分支
这个 JS 检测只说明浏览器注册了 touchstart 事件，不代表设备有物理触摸能力。Chrome 桌面版、Edge 模拟器、Linux 浏览器都返回 true，塞进 class 再写 CSS 会导致样式错乱。
- ❌
document.documentElement.classList.add('has-touch')+.has-touch button:hover { ... }是常见但危险的做法 - ✅ 如果真要用 JS 辅助，优先用
window.matchMedia("(hover: none) and (pointer: coarse)").matches，它和 CSS 媒体查询行为一致，且可监听变化 - ⚠️ 最容易被忽略的一点：这些媒体特性是运行时动态响应的，不是页面加载时拍板定案的静态标签
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
