触屏设备必须用@media (hover: none)或(pointer: coarse)识别，不能依赖ua或屏幕宽度；正确写法是基础样式外置，交互态用媒体查询隔离，菜单改用details/summary或click触发。
触屏设备不能靠 :hover 做交互反馈，必须用 @media (hover: none) 或 @media (pointer: coarse) 明确识别并隔离样式逻辑。
为什么不能用 UA 或屏幕宽度判断触屏
很多开发者习惯用 @media (max-width: 768px) 当作“移动端开关”，但这是错的：带触摸屏的 Windows 笔记本、Surface Pro、折叠屏手机横屏时都可能宽过 768px，却仍需触屏逻辑；而某些小屏桌面显示器（如 1024×600）又没触摸能力。更糟的是，navigator.userAgent 在 iOS 15+ 和 Chrome Android 上已不可靠，且无法响应运行时插拔鼠标等动态变化。
真正有效的判断依据只有两个 CSS 媒体特性：
-
(hover: hover)：设备支持持续悬停（如鼠标、触控板），值为hover；否则为none -
(pointer: coarse)：主输入方式是粗粒度（如手指），值为coarse；精确指针（鼠标/笔）则为fine
两者可组合使用，例如：@media (hover: none) and (pointer: coarse) 能精准命中纯触屏设备。
如何写一个安全的触屏专用按钮样式
直接在基础按钮上叠加触屏分支，避免覆盖或遗漏默认态：
.btn {
padding: 12px 24px;
min-width: 44px;
min-height: 44px;
transition: background-color 0.2s, transform 0.2s;
}
@media (hover: hover) {
.btn:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
}
@media (hover: none), (pointer: coarse) {
.btn:active {
background-color: #004494;
transform: scale(0.98);
}
/* 禁用 Safari 的延迟点击高亮 */
.btn {
-webkit-tap-highlight-color: transparent;
}
}
注意点：
- 基础样式（
padding、min-width、transition）必须写在媒体查询外，否则触屏设备会丢失过渡动画，显得生硬 - 不要只写
@media (pointer: coarse)—— 某些触控笔设备也返回coarse，但实际支持 hover，应优先以hover特性为准 -
:active样式要轻量，避免改height或margin，否则触发重排，iOS 上易卡顿
触屏下如何替代 hover 展开菜单
纯 CSS 实现触屏友好菜单的关键是放弃“悬停即展开”，改用显式触发 + 状态保持：
- 用
details/summary元素，天然支持触屏点击展开，且语义正确、无障碍友好 - 若需自定义样式，给
summary加tabindex="0"，再用:focus-within控制子菜单显示（iOS Safari 15.4+ 支持） - 避免用
:hover+:focus混合模拟——在 iPad 上，:focus只在键盘聚焦时生效，触屏点击不触发 - 如果必须 JS 控制，监听
click并切换类名，同时加touch-action: manipulation提升响应速度
示例结构：
<details class="nav-dropdown"><summary>产品</summary><ul>
<li><a href="/a">A系列</a></li>
<li><a href="/b">B系列</a></li>
</ul></details>
对应 CSS 中，用 @media (hover: none) 移除 summary 的 hover 样式，仅保留 click 展开行为。
容易被忽略的兼容与性能细节
最常踩的坑不是写错语法，而是忽略了运行时上下文：
-
@media (hover: hover)在 Safari iOS 15.4+ 默认关闭，除非用户手动开启「辅助功能 > 触控调节 > 指针控制」，所以它永远不该是唯一交互路径 - 即使检测到
pointer: fine，也不能假设用户当前正用鼠标——比如 Surface 插着键盘但用手写笔操作，此时fine仍为真，但交互意图是触控 - 所有触屏反馈样式（包括
:active和:focus）必须搭配transition，否则 iOS 会跳变；但动画时间别超过 0.3s，否则感知迟滞 - 不要在
@media (hover: none)内重写整个组件样式，只覆盖交互相关属性（颜色、缩放、阴影），其他布局、字体、间距保持统一
真正的难点从来不是“怎么写”，而是接受：触屏和鼠标是两套独立交互模型，强行统一只会让两边都别扭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
