iOS标签需点两次跳转是因Safari将首次touchstart视为:hover模拟，仅渲染样式不触发click；加<body ontouchstart>可禁用该机制，直接走click流程。
为什么iOS上标签要点两次才跳转
根本不是CSS写错了，是 Safari 在触屏模式下把第一次 touchstart 当作模拟 :hover 的触发点，样式渲染了，但链接没激活；第二次点击才真正触发 click 和跳转。这不是 bug，是 iOS WebKit 对悬停兼容层的“降级执行”逻辑——它优先保交互安全，牺牲了桌面端的直觉。
最轻量的修复：给 body 加 ontouchstart
只需在 <body> 标签上加一个空的 ontouchstart 属性，就能让 Safari 放弃对 :hover 的延迟模拟，直接走 click 流程。这个操作不改 JS、不加 class、不影响样式顺序。
-
<body ontouchstart>是最简方案，比 JS 监听更早生效，且兼容 iOS 10+ 所有版本 - 别用
document.body.addEventListener('touchstart', ...)—— 它可能晚于首次触摸，起不到拦截效果 - 如果用了 Vue/React 等框架，确保这个属性在首屏 HTML 中就存在，不要等 JS 挂载后再加
如果必须保留:hover动画，怎么避免二次点击
不能一边靠 :hover 做视觉反馈，一边又指望它不干扰点击流程。真要渐进增强，得把动画和跳转解耦：
- 把过渡效果（如
transition: background-color 0.2s）写在常规状态里，而不是只塞在a:hover中 -
a:hover只负责微调（比如opacity: 0.95），不触发重排或影响布局 - 禁用
:hover对<a>的链接行为干预：用@media (hover: hover) and (pointer: fine)包裹整个a:hover块，让 iOS 设备直接跳过它 - 注意顺序：这个媒体查询块必须放在所有基础
a样式之后，否则会被默认规则覆盖
彻底绕开:hover的替代路径
当项目已上线、无法改 HTML 结构，或需兼容老旧微信 X5 内核时，ontouchstart 属性可能被忽略。这时得用 JS 主动接管：
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart，立即给目标<a>加临时类is-touched，并在touchend后 100ms 移除 - CSS 中写
a.is-touched, a:hover双选择器，保证视觉反馈一致 - 关键点：在
touchstart回调里调用event.preventDefault()仅当你要阻止默认跳转时才用；多数情况不需要，加了反而破坏可访问性 - 别用
click事件模拟跳转（比如window.location = href）—— 这会破坏右键新标签页、中键打开等原生能力
ontouchstart，如果页面同时用了 fastclick 或自定义 touch 事件代理，它们可能劫持并吞掉第一次触摸，导致修复失效。这种情况下，得检查事件是否冒泡、是否被 stopPropagation() 截断。 
