-webkit-tap-highlight-color 由 css 控制，meta 标签完全无效；x5 内核仅将 viewport 中 user-scalable=no 作为启用该 css 的开关；android chrome 62+ 已移除支持；推荐用 :active 伪类实现跨平台点击反馈。
-webkit-tap-highlight-color 不是 meta 标签能控制的，别被标题误导了。meta 标签本身**完全不参与点击高亮的消除**，所有试图用 <meta> 关掉高亮的操作都是无效的。
为什么标签对点击高亮无效
点击高亮是渲染引擎在触摸事件触发时叠加的一层临时视觉反馈，由 CSS 属性 -webkit-tap-highlight-color 控制，和 HTML 的 <meta> 无任何样式或行为关联。viewport meta 只影响缩放、尺寸计算和视口行为，不接管点击态渲染。
微信 X5 内核里看似“起作用”的真实原因
微信内置浏览器（X5）有个特殊规则：-webkit-tap-highlight-color 是否启用，取决于 <meta name="viewport"> 是否存在且含 user-scalable=no。但这不是 meta 在“消除高亮”，而是 X5 把它当做一个开关信号 —— 缺少该 meta 或含 user-scalable=yes，X5 直接忽略该 CSS 属性，哪怕你写了 transparent 也白搭。
- 必须写全 viewport：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -
user-scalable=no是 X5 启用-webkit-tap-highlight-color解析的硬性前提 - 仅限 X5 和旧版 QQ 浏览器；Android Chrome 62+、Firefox、Safari 正式版均无视此规则
真正起作用的 CSS 写法与生效条件
-webkit-tap-highlight-color: transparent 要生效，得同时满足三件事：元素语义可交互、有正确焦点能力、CSS 被正确解析。
- 对
<a></a>、<button></button>这类原生可点击元素，直接加该样式通常有效（iOS Safari 下） - 对
<div onclick="..."></div>这类自定义按钮，必须补上role="button"+tabindex="0"，否则 Safari 根本不认为它是可激活目标 - Android Chrome 62+ 已彻底移除对该属性的支持，设了也无效 —— 别再把它当作跨平台方案
- 避免依赖
user-select: none来“顺带”抑制高亮，它会破坏长按复制、选中文本等基础操作
更可靠、可维护的替代方案
与其卡在私有属性兼容性里反复试错，不如主动用标准方式接管点击反馈：
- 确保元素有
cursor: pointer或role="button"，让:active伪类可用 - 写
a:active { opacity: 0.7; }或button:active { background-color: #eee; }做可控反馈 - 配合
outline: none（仅对键盘焦点场景谨慎使用）避免双高亮干扰 - 在 React/Vue 中，绑定 click 的
<div> 务必同步加 <code>role="button" tabindex="0"，否则既没高亮也没无障碍支持 真正麻烦的从来不是“怎么写那行 CSS”，而是搞清它在哪生效、为什么失效、以及失效后该怎么兜底 —— 尤其当项目要跑在微信、X5、Chrome、Safari 多个环境里时，-webkit-tap-highlight-color的边界条件比代码本身更值得花时间确认。
