移动端图片本身不会被识别为电话号码，变色的是纯文本数字串；iOS Safari/WKWebView自动将其解析为蓝色可点击链接；禁用需在head中添加<meta name="format-detection" content="telephone=no">。
移动端图片本身不会被识别为电话号码——变色的从来不是 <img>，而是页面中**纯文本形式的数字串**（比如 13812345678）被 iOS Safari 或 WKWebView 自动解析为可点击电话链接，并套上默认蓝色 + 下划线样式。所谓“图片变色”，通常是误判：实际是紧邻图片的文字（如图注、联系信息）被染蓝，或图标字体（如 iconfont）里混入了数字字符触发了识别。
为什么加 color 样式无效
iOS 对识别出的电话号码会生成一个隐式的 <a href="tel:..."> 包裹层，其样式优先级高于你对父容器写的 color。即使你给外层 <p> 设置了 color: #333，系统仍会强制应用 a[href^="tel"] 的 UA 样式（通常是 color: #0000ee + text-decoration: underline）。
- 直接写
a { color: inherit; text-decoration: none; }有一定效果，但不彻底——部分 iOS 版本会忽略该规则，尤其在 Webview 内嵌场景 -
!important在某些 WKWebView 中也失效，属于 UA 样式深度介入 - 用
<span>包住数字再设color没用，因为系统是在 DOM 渲染后动态插入链接节点，不是靠 HTML 结构判断
meta name="format-detection" 是唯一可靠方案
禁用自动识别必须从源头切断，而不是事后覆盖样式。iOS 提供的标准机制就是 <meta name="format-detection" content="telephone=no">，它告诉 WebView：“别扫描文本找电话，哪怕它长得像”。这个 meta 必须放在 <head> 中，且越早出现越好。
- 只写一次即可生效，无需每个数字都包裹处理
- 不影响手动添加的
<a href="tel:138...">链接功能——你仍可主动创建拨号链接，只是系统不再“擅自”添加 - 注意拼写：
name是format-detection（不是format_detection或带中文破折号），content值是telephone=no（不能写成false或off） - 若页面由 SSR 或多页应用动态注入，需确保该 meta 在首屏 HTML 中已存在，JS 后续插入可能来不及阻止渲染时的识别
当必须保留数字可点击时，如何控制颜色
如果你既要点击拨号功能，又要自定义颜色（比如灰字+无下划线），就**放弃自动识别，改用显式 <a> 标签**：
立即学习“前端免费学习笔记（深入）”；
- 把数字明确包进
<a href="tel:13812345678">13812345678</a> - 然后用 CSS 精确控制：
a[href^="tel"] { color: #666; text-decoration: none; } - 避免用
a { ... }全局覆盖，防止影响其他正常链接 - 如果数字在富文本中（如 CMS 输出），需服务端或前端做预处理，把符合手机号格式的纯文本替换成带
tel:的链接
真正棘手的不是样式覆盖，而是识别行为发生在渲染流水线早期，CSS 已经晚了一步。所以不要在 color 上反复调试，先确认 meta 标签是否生效——打开 Safari 开发者工具（连接 Mac Safari 的「开发」菜单），检查元素是否还被自动套上 <a>，这是最直接的验证方式。
