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

时间:2014-04-07 14:51:30

标签: html ios safari phone-number

我有一个html页面,其中包含以下文字:

<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: salesperson@company.com or by phone: 888-888-8888</font>

在iOS上的safari以外的各浏览器中都能很好地显示。数字就在那里,因为您可以点击它,iOS设备会提示您拨打此号码。它只是不可见。

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

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

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

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

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

但在这种情况下,IE实际上试图转到“tel:888-888-8888”链接,所以它根本不是最好的解决方案。

所以问题是:是否可以将电话号码保留为文本,但是在iOS设备的Safari中将其显示为可识别的电话号码?

其他信息:

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

5 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分:1)

<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

答案 2 :(得分:0)

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

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

而不是:

<font face="Tahoma, Geneva, sans-serif">Please contact our sales person by email: salesperson@company.com or by phone: 888-888-8888</font>

尝试:

<span style="font-family: Tahoma, Geneva, sans-serif;">
      Please contact our sales person by email: salesperson@company.com or by phone: 888-888-8888
</span>

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

答案 3 :(得分:0)

此解决方案适合我

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

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

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

答案 4 :(得分:0)

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

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