为什么这个电话号码在iOS Safari中无法识别?

移动开发 2026-07-10

Q: - 为什么这个电话号码在iOS Safari、Swift或其他Apple平台上没有被识别为电话号码?

简介 我恰好是一个小型业余跳棋俱乐部的管理员。每周,我把线上进行的对局结果整理出来。结果将通过一个比赛管理工具(JBF,Sevilla)发布。

我没有访问HTML的权限。不过,我可以用CSS来对报告进行样式设定。例如,报告中的一个标题行可能长成这样:

<p class="MainTitleRow">Round 20 - 1-1-2026</p>

翻译成荷兰语后,变成了:

<p class="MainTitleRow">Ronde 20 - 1-1-2026</p>

这一切都很正常,除了在iPad或 iPhone的 Safari中会出现问题。 在那种情况下,最后一行(而不是第一行)中的“20 - 1-1-2026”突然变成了一个电话链接。 希望它不是一个我可能不小心拨打的高费号码。

发生的原因是Safari将一个锚点元素插入到DOM中。

<p class="MainTitleRow">
"Ronde "
<a href="tel:20 - 1-1-2026">20 - 1-1-2026</a>
</p>

在Stack Overflow及其他地方有大量关于如何解决的建议。 这是我的做法:

按如下方式为 <a> 设置样式: .MainTitleRow a[href^=tel] {all: unset;}

接下来,我通过在 MainTitleRow 类中添加以下行来禁用标题行的触摸事件: pointer-events: none;

既然预防胜于治疗,我的问题是:

Q: 仅使用CSS且不访问HTML源代码,如何阻止iOS Safari将数字识别为电话号码?

到目前为止我所发现的 请看下面的HTML代码。在荷兰的iPad、iPhone(在Safari中)上运行时,第一行的数字会被Safari识别为电话号码。然而,第二行的数字不会自动被识别为电话号码。如何解释这种差异?

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- RFC 3966 - The tel URI for Telephone Numbers, December 2004 -->
    <title>Apple Safari automatic phone number recognition</title>
    <meta name="format-detection" content="telephone=yes">
    <style>
      a[href^=tel] {color: red;}
    </style>
  </head>
  <body>
    <p>Tel. 1-555-555-5555, automated phone number (iOS).</p>
    <p>DID 1-555-555-5555, it seems that any word with at least three letters and ending in a “d” disables the phone number detection.
    <p>DID +1-555-555-5555, is however en exception.
    <p>Apple 0800 0201581, automated phone number (iOS).</p>
    <p>Gourd 0800 0201581, not an automated phone number.</p>
    <p>Round 20 - 1-1-2026, no detection.</p>
    <p>Ronde 20 - 1-1-2026, false positive, malformed URL.</p>
  </body>
</html>

补充说明 似乎任何以至少三个字母结尾且以“d”或“D”结尾的词,都会使电话号码检测失效。只是猜测。这是不是一种在自动检测中排除直拨(Direct Inward Dialing,DID)的方法? xxx

NSDataDetector 在继续搜索时,我在 Apple Developer Documentation 中看到这个。

A specialized regular expression object that matches natural language text for predefined data patterns.

上文中的电话号码在Swift之类的环境中是否被正确识别?如果会,相关的正则表达式看起来是什么样的?

解决方案

你不能仅靠CSS来阻止这种情况。

CSS在处理流程上太晚了。Safari已经在应用你的CSS之前就运行了数据检测并插入了tel链接。CSS可以对生成的链接设定样式,或让它难以点击,但它不能让Safari不创建它。

真正的开关在文档头部是这样:

\<meta name="format-detection" content="telephone=no"\>

这是在iOS Safari中禁用自动电话号码检测的受支持方式。

如果你不能修改HTML的 head,那么就没有真正的修复办法。你最多能做的是在Safari创建链接后将其中和/弱化:

.MainTitleRow a\[href^="tel:"\] {  
    color: inherit;  
    text-decoration: inherit;  
    pointer-events: none;  
    cursor: inherit;  
}

我会把指针事件放在生成的tel链接上,而不是整行标题,除非你确实想要禁用那一行的所有鼠标/触控交互。

关于“Round”和“Ronde”之间的差异,我不会据此制定任何规则。这既不是HTML解析规则,也不是CSS规则。它是苹果的数据检测启发式算法。它会根据上下文文本、区域设置以及数字的写法来判断一个字符串是否为电话号码。某些附近的词会改变结果,但这并不使它们成为可靠的控制词。

NSDataDetector是同类API。它暴露的是苹果检测器的结果,而不是Safari内部使用的正则表达式。没有可供逐字符复制或推导的、文档化的正则表达式。

站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章