全局禁用电话/邮箱自动识别必须加meta标签，仅靠CSS无效；需在<head>中<title>后插入<meta name="format-detection" content="telephone=no,email=no">，content值须小写、无空格、逗号分隔，且仅旧版iOS Safari部分支持，Chrome/Firefox/Edge完全不识别。
全局禁用电话/邮箱自动识别必须加 meta 标签
只靠 CSS 无法阻止 Safari 或 Android WebView 对数字、邮箱的自动链接化，meta 标签是唯一可靠入口。必须在 <head> 中、<title> 之后插入：
<meta name="format-detection" content="telephone=no, email=no">
这个声明告诉浏览器：“别猜了，页面里所有数字和邮箱都只是普通文本”。注意两点：
- content 值必须写成
telephone=no, email=no连写（逗号后不加空格），分开写两个meta可能被后加载的覆盖 - 如果页面中真有需要拨号的号码，得手动用
<a href="tel:13800138000">显式包裹，不能依赖自动识别
为什么 -webkit-tap-highlight-color 对数字高亮完全无效
-webkit-tap-highlight-color: transparent 管的是「点击反馈层」，不是「文本识别逻辑」。数字变蓝加下划线，是 Safari 在 DOM 渲染阶段就注入的 <a> 包裹或伪样式，和 touch 事件无关。你给 body 或 p 加这条规则，浏览器压根不匹配——它只作用于可点击元素，而纯数字文本节点不可点击。
立即学习“前端免费学习笔记（深入）”；
常见误操作包括：
- 给
span或div写-webkit-tap-highlight-color，但里面数字已被 Safari 自动套了<a class="number-link">—— 此时该样式需作用于那个隐式生成的a，而非外层容器 - 用
user-select: none想“防点击”，结果只是禁了复制，蓝色链接照常存在且可触发拨号
局部保留拨号功能时的正确姿势
当页面同时存在订单号（如 20260929123456）和客服电话（如 400-123-4567）时，“关全局 + 开局部”是唯一安全路径：
第一步：保留上面的 meta 标签，确保所有数字默认不被识别
第二步：对真实电话显式声明语义：
<a href="tel:400-123-4567" role="link">400-123-4567</a>
这样既绕过自动识别的不可控性，又保证屏幕阅读器和系统拨号功能正常工作。切忌用 JS 动态插入 tel: 链接却不补 role，iOS VoiceOver 可能直接跳过该节点。
真机验证时最容易漏掉的三个点
桌面 Chrome 模拟器完全不触发格式识别，必须用真机测：
- iOS Safari：长按任意 7 位以上纯数字（如
13812345678），若弹出菜单含“拨打xxx”选项，说明meta未生效或位置错误 - 微信内置浏览器（X5 内核）：部分版本会忽略
email=no，但telephone=no稳定；若邮箱仍变蓝，需检查是否被第三方 SDK 注入了同名meta - Android Chrome（62+）：已移除对
format-detection的支持，但 WebView（如企业微信、钉钉）仍可能识别——不能因 Chrome 正常就认为全端 OK
真正麻烦的从来不是加一行 meta，而是当设计稿里混着 18 位身份证、6 位验证码、400 电话、带分隔符的手机号时，你得逐个判断哪些该保语义、哪些该断识别，并让每个都经得起 iOS 和 X5 的双重检验。
