meta name="format-detection" 在 iOS 10 及以后完全失效，WebKit 已移除支持；唯一可靠方案是为数字容器添加 -webkit-touch-callout: none 并配合 role="text"。
meta name="format-detection" 在 iOS Safari 中早已失效，任何写法（包括 telephone=no）都不会阻止 7 位以上纯数字被渲染成可点击电话链接。这不是配置没写对，是 WebKit 引擎在 iOS 10 后彻底移除了该机制支持。
为什么 meta name="format-detection" 现在完全没用
iOS 10（2016 年发布）起，Apple 就废弃了 format-detection 的所有行为。Safari 不再解析该 meta 标签，也不触发任何逻辑——既不报错，也不生效。你可以在 DevTools 里检查 DOM，能看到标签存在，但它对渲染零影响。所有声称“加了就解决”的老教程，都基于 iOS 9 或更早版本，已严重过时。
- 即使写全
<meta name="format-detection" content="telephone=no,email=no,adress=no">，iOS 16/17/18 真机仍会把13812345678渲染成蓝色可点击文本 - PC 浏览器、Android Chrome、Firefox 完全不识别这个标签，它本就是 WebKit 移动端专属（且已作废）
- 没有兼容性 fallback：它不是“有时有效”，而是“永远无效”
-webkit-touch-callout: none 是唯一可靠拦截点
电话识别发生在 WebKit 渲染层，不是 JS 事件层。所以不能靠 onclick 或 touchstart 拦截——用户手指一碰，系统已跳转拨号页，JS 根本收不到事件。真正有效的控制点只有一个：-webkit-touch-callout CSS 属性，它直接关闭底层调用行为。
- 必须作用于包裹数字的 HTML 元素，例如
<span style="-webkit-touch-callout: none;">13812345678</span> - 单独写
-webkit-touch-callout: none就够，-webkit-text-security: none不必要，且可能干扰其他样式 - 不能只写在父容器上——如果数字在
<p>里，而样式只设在<div>上，无效 - 该样式在非 WebKit 浏览器（如 Chrome Desktop）无副作用，可安全全局使用
role="text" 配合语义化 HTML 才能绕过识别触发条件
WebKit 对数字的识别有隐式语义依赖：它优先在 <div>、<p>、<span> 这类中性容器中触发；但一旦容器明确声明为纯文本语义，识别引擎会主动跳过。这就是 role="text" 的实际价值——不是“告诉屏幕阅读器这是文本”，而是“告诉 WebKit 别当它是可交互数据”。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<span role="text" style="-webkit-touch-callout: none;">订单号：113987654321</span> - 避免用
<button>、<a>或带onclick的元素直接包裹长数字——哪怕没 href，WebKit 仍可能强化识别 - 数字含分隔符（如
021-8765-4321）反而更容易被误判，建议改用空格：021 8765 4321，或全角符号：０２１－８７６５－４３２１
真机测试不可省略，模拟器和 DevTools 无法复现
这个行为只存在于 iOS/macOS Safari 的 WebKit 渲染管线中，且 Apple 未提供任何开发者开关或模拟选项。你在 Chrome DevTools 里切到 iPhone 模式，看到的只是响应式布局，不是真实识别逻辑。
- 必须用 iOS 真机访问，打开 Safari，手动点击疑似数字区域，观察是否跳转拨号页
- 尤其注意微信内置浏览器（WKWebView）、QQ 浏览器（同源 WebKit）也会继承该行为，不能只测 Safari
- 如果你的页面只跑在企业内网或 Electron 环境，也要确认其 WebView 版本——只要基于较新 WebKit，就适用这套规则
最常被忽略的细节：不是“怎么写 meta”，而是“数字出现在什么上下文里”。一个 role="text" + -webkit-touch-callout: none 组合能覆盖 99% 场景，但若数字嵌套在 <input type="number"> 或 contenteditable 区域内，行为可能不同——这时候得换思路，比如用掩码或分段渲染。
