在iPhone上查看电话号码时,是否有办法删除默认的蓝色超链接颜色?像一个特定的移动Safari标签或CSS添加?

我只在数字的地方有这个:

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

这里没有超链接,但iPhone仍然将这个文本数字显示为超链接。我在我的一些网站上有这个渲染问题,但不明白为什么会发生这种情况。

我确实读过这篇文章:

移动HTML渲染数字

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


当前回答

尝试将ASCII字符的破折号放在数字分隔之间。

从这里:-

到此:&ndash;

例如:change 555-555-5555 => 555&ndash;555&ndash;5555

其他回答

如果你只是想避免电话号码作为链接,可以使用字体标签:

<p>800<font>-</font>555<font>-<font>1212</p>

一个老问题,但上面的答案都不适合我,我张贴了我是如何解决它的

我有个电话号码在单子上:

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

css:

.phone_menu{
  color:orange;
}

但是在iPad/iPhone上它是黑色的,所以我只是添加了这个css:

.phone_menu a{
  color:orange;
}

由于我们在一个网站上使用tel:链接,在大多数解决方案之前,这里发布了另一个问题。

我使用元标签:

<元名称=“格式检测” 内容=“电话=否”>

这与指定tel: links站点范围内它应该链接!

使用css真的不是一个选择,因为它隐藏了相关的电话链接。

<meta name="format-detection" content="telephone=no">。这个metatag可以在iOS设备上的默认Safari浏览器中工作,并且只适用于没有被包裹在电话链接中的电话号码

1-800-123-4567
<a href="tel:18001234567">1-800-123-4567</a>

如果指定了元标签,第一行将不会被格式化为链接,但第二行会,因为它被包装在电话锚中。


您可以完全放弃元标记,而使用mixin,例如

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

为了保持您的电话号码的预期样式,但您必须确保将它们包装在电话锚中。

如果您希望格外谨慎,防止出现没有使用包装锚标记正确格式化的电话号码,则可以钻取DOM并使用此脚本进行调整。根据需要调整替换模式。

$('body').html($('body').html().replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

或者没有jQuery更好

document.body.innerHTML = document.body.innerHTML.replace(/^\D?(\d{3})\D?\D?(\d{3})\D?(\d{4})/g,'<a href="tel:+1$1$2$3">($1) $2-$3</a>');

这个x-ms-format-detection="none"属性处理格式化电话。

https://msdn.microsoft.com/en-us/library/dn337007 (v = vs.85) . aspx

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