为什么这个电话号码在iOS Safari中无法识别?
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内部使用的正则表达式。没有可供逐字符复制或推导的、文档化的正则表达式。