iOS上的safari中未显示电话号码

Posted 2021-05-02

我有一个html页面，其中包含以下文本：

<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: [e-mail] or by phone: [phone]</font>

除了在ios上的safari之外，它确实在每个浏览器中都很好。数字就在那里，因为您可以点击它，iOS设备会提示您拨打此号码。它只是不可见。

我找到的解决方案之一是将以下代码行添加到页面的头部：

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

该号码变得可见，但Safari不再将其识别为电话号码，因此用户无法进行点击通话。

另一种解决方案是将电话号码设为链接：

<a href="tel:[phone]" style="color:#000">888-888-8888</a>

但在这种情况下，IE实际上试图转到“tel：[phone]”链接，所以它根本不是最好的解决方案。

所以问题是：是否可以将电话号码保留为文本，但是可以将其显示为可识别并在iOS设备上的Safari中识别为电话号码？

附加信息：

字体为白色，因为它在CSS文件中指定了链接。我不想改变它，因为这将影响所有其他链接，这些链接被认为是白色的。只有iOS上的Safari才能通过电话号码进行超链接。

答案

尝试创建与原始链接类似的单独链接类，并使代码中的每个链接成为该类的链接。将电话号码保留为纯文本。它应该工作。

另一答案

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

在标题中设置此项以关闭网页中的电话号码检测。

资料来源：https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/PhoneLinks/PhoneLinks.html#//apple_ref/doc/uid/TP40007899-CH6-SW1

另一答案

font tag已过时，不应使用。它在HTML 4.01中已弃用，在HTML 5中完全不受支持。

如果您通过CSS应用文本样式，它应该显示在移动Safari中。

代替：

<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: [e-mail] or by phone: [phone]</font>

尝试：

<span style="font-family: Tahoma, Geneva, sans-serif;">
      Please contact our sales person by email: [e-mail] or by phone: [phone]
</span>

理想情况下，您可以使用样式表来指定页面的演示文稿，但如果您只想要一个插入式解决方案，则应该可以使用。但是，Write valid html，你不会遇到这种问题。

另一答案

这个解决方案对我有用

a[href^=tel] {
    color: inherit;
    text-decoration: none;
}

我在这里找到了。 https://css-tricks.com/forums/topic/phone-numbers-not-displaying-in-safari/

这似乎是一个奇怪的CSS问题与safari处理数字的方式。

另一答案

似乎IOS会将电话号码变成一个锚，即使它不在锚中。给它一个类或id，然后设置你的锚的样式。

.contact { }
.contact a { text-decoration: none; color: #000000; }