meta name="format-detection" 在 ios 10+ 中完全失效，唯一可靠方案是使用 -webkit-touch-callout: none 结合 role="text" 阻止电话识别，js 拦截无效，真机测试不可替代。
format-detection 在 iOS Safari 中早已失效
直接说结论：meta name="format-detection" 标签在 iOS 10+（含当前 iOS 16/17）中完全不生效，无论你写 telephone=no 还是连写 telephone=no,email=no,adress=no，Safari 都会忽略它。这不是配置错误，是 WebKit 已移除该机制——控制台无报错、无警告，但行为照旧。
常见错误现象：开发时在 Chrome 或模拟器里测试正常，真机一打开，订单号 113987654321 或身份证号 11010119900307281X 仍被渲染成蓝色可点击链接，点一下就跳拨号页。
- 该标签仅在 iOS 9 及更早版本有效，目前已无兼容价值
- Android WebView 行为不统一，部分旧版 UC/QQ 浏览器可能响应，但不可依赖
- 写它不会报错，但会给你一种“已解决”的错觉，延误真实问题排查
-webkit-touch-callout: none 是唯一可靠禁用方式
真正起作用的是 CSS 属性 -webkit-touch-callout: none，它直接关闭 WebKit 渲染引擎的底层调用弹窗触发逻辑。必须配合 HTML 语义化使用，单靠 CSS 不够稳定。
正确写法示例：
<span style="-webkit-touch-callout: none;" role="text">113987654321</span>
关键点：
-
role="text"告诉辅助技术这是纯文本，避免语义歧义触发识别 - 不要用
<div> 或 <code><p></p>直接包裹长数字——它们本身不带交互语义，但 Safari 仍可能扫描其子内容 - 避免在
<a></a>、<button></button>、<input>内部放纯数字，这些元素自带交互上下文，会加剧误判 - 如果数字含分隔符（如
021-8765-4321），改用全角空格或 Unicode 零宽空格（）替代短横线，例如02187654321
为什么 JavaScript 拦截 click 无效
有人试图用 event.preventDefault() 或 touchstart 监听阻止跳转，结果失败——因为电话识别发生在渲染层，不是 DOM 事件层面。用户手指落下的瞬间，WebKit 已完成号码匹配并启动系统拨号流程，JS 事件监听器根本收不到这个“点击”。
典型无效代码：
document.querySelector('.order-id').addEventListener('click', e => { e.preventDefault(); });
这类写法只对普通 <a href></a> 有效，对 Safari 自动注入的伪链接无效。你监听的是“用户点击容器”，而系统触发的是“匹配到号码后直接唤起 Telephony API”，两者不在同一事件通道。
- JS 无法 patch WebKit 的内置识别逻辑
- 尝试
pointer-events: none会破坏所有交互，得不偿失 - 唯一可行路径是：从源头阻止识别触发，即用 CSS + role 组合切断识别条件
PC 开发者最容易忽略的真机验证环节
这个行为只存在于 WebKit 移动端（iOS Safari、iPadOS Safari、部分 Android Chrome 的 WebKit 分支），桌面 Safari 和 Chrome 完全不触发。DevTools 的 responsive mode 也无法模拟该行为——没有开关，没有 toggle，没有 warning。
这意味着：
- 哪怕你只面向 PC 用户开发，只要页面有移动端访问入口（比如微信内嵌浏览器），就必须真机测试
- CI 流程里不能只跑 Puppeteer 或 Playwright 的 desktop 模式
- 敏感数字字段（如支付单号、银行卡号、证件号）上线前，必须拿 iPhone 实机点一遍，确认不跳拨号页
截至 2026 年 6 月，没有替代方案能绕过 -webkit-touch-callout: none + role="text" 这个组合。任何试图“兼容旧 meta 标签”或“用 JS 拦截”的思路，都会在真机上当场失效。
