如何在iPhone/iOS上删除电话号码的蓝色样式？

Question

有没有办法在iPhone上查看时从电话号码中删除默认的蓝色超链接颜色？像要添加的特定Mobile Safari标记或CSS一样？

我只有这个数字:

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

并且没有超链接,但iPhone仍然将此文本编号作为超链接呈现.我在我的一些网站上有这个渲染问题,但无法理解为什么会这样.

我读过这篇文章:

移动HTML呈现数字

但这是唯一可行的解​​决方案吗？

Answer 1

两种选择......

1.设置format-detection元标记.

要删除所有自动格式化的电话号码,将其添加到head您的html文档:

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

查看更多Apple特定的元标记密钥.

注意:如果您在页面上有这些号码的电话号码,您应该手动将它们格式化为链接:

<a href="tel:+1-555-555-5555">1-555-555-5555</a>

2.无法设置元标记？想用css吗？

两种css选择:

选项1(更适合网页)

使用此css属性选择器以#href开头的目标链接tel:

a[href^="tel"] {
  color: inherit; /* Inherit text color of parent element. */
  text-decoration: none; /* Remove underline. */
  /* Additional css `propery: value;` pairs here */
}

选项2(更适合html电子邮件模板)

或者,您可以在无法设置元标记时 - 例如在链接/锚标记(<a href=""></a>)中的html电子邮件包装电话号码中,然后使用类似于以下的css定位其样式并调整您需要重置的特定属性:

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

如果要定位特定链接,请使用链接上的类,然后将上面的css选择器更新为a[x-apple-data-detectors].class-name.

Answer 2

只是要详细说明David Thomas早先的建议:

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

将此添加到您的css会留下电话号码的功能,但会删除下划线并匹配您最初使用的颜色.

奇怪,我可以发布自己的答案,但我不能回应别人的..

Answer 3

如果您想保留电话号码的功能,但只是为了显示目的而删除下划线,您可以将链接设置为任何其他类型:

a:link {text-decoration: none; /* or: underline | line-through | overline | blink (don't use blink. Ever. Please.) */ }

我没有看到建议将类应用于电话号码链接的文档,因此您必须将类/ ID添加到您想要具有不同样式的链接.

您也可以使用以下方式设置链接样式

a[href^=tel] { /* css */ }

这是iPhone的理解,并且不会被任何其他UA应用(据我所知,也许Android,Blackberry等用户/开发者可以发表评论).

Answer 4

如果人们在Google上发现此问题,您需要做的只是将电话号码视为链接,因为Apple会自动将其设置为一个.

你的HTML

<p id="phone-text">Call us on <strong>+44 (0)20 7194 8000</strong></p>

你的CSS

#phone-text a{color:#fff; text-decoration:none;}

Answer 5

由于我们在一个带有电话图标的网站上使用tel:links:在此处发布的大多数解决方案引入了另一个问题.

我使用了元标记:

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

这与在网站范围内指定tel:links相关联,它应该链接在一起!

使用css实际上不是一个选项,因为它隐藏了相关的电话链接.

Answer 6

a[href^=tel]{
    color:inherit;
    text-decoration: inherit;
    font-size:inherit;
    font-style:inherit;
    font-weight:inherit;

Answer 7

简单的技巧对我有用,在电话号码中间添加了一个隐藏的对象.

<span style="color: #fff;">
0800<i style="display:none;">-</i> 9996369</span>

这将帮助您覆盖IOS的电话号码颜色.

Answer 8

一个老问题,但由于上述答案都不适合我,我发布了如何解决它

我在列表中有一个电话号码:

<li class="phone_menu">+555 5 555 55 55</li>

CSS:

.phone_menu{
  color:orange;
}

但是在iPad/iPhone上它是黑色的,所以我把它添加到了css中:

.phone_menu a{
  color:orange;
}