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

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

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

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

我确实读过这篇文章:

移动HTML渲染数字

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


当前回答

不需要使用<meta name="format-detection" content="telephone= No ">删除格式检测。尝试在任何标签中使用电话号码,而不是锚定标签,并相应地设置它的样式,例如:span {background:none !边界:0;填充:0;}

其他回答

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

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

这将帮助你覆盖手机号码颜色的IOS。

Joomla Yootheme对我来说很有用:

a:not([class]) {
    color: #fff !important;
}

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

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、黑莓等平台的用户/开发者也可以对此发表评论)。

如果人们在谷歌上发现这个问题,你所需要做的就是把电话号码作为一个链接,因为苹果会自动把它设置为一个链接。

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;}

如果您不打算在您的页面上有任何电话号码,那么 <meta name="format-detection" content="telephone=no"> 会工作得很好。但从修辞上讲,如果你打算混合使用电话号码和非电话号码呢?

假设您只是将数字硬编码到HTML中,那么“在数字中间插入一些东西”的技巧将会起作用。但是对于动态页面,例如使用PHP从查询中输出数值数据,它们几乎没有用处。

例如,我正在生成一个城市人口列表。有些用户数量大到足以让Mobile Safari把它们转换成电话号码链接。幸运的是,我所要做的就是使用PHP number_format()在数组输出周围插入“thousand”逗号:

<?PHP echo number_format($row["population"])

这种格式足以让Mobile Safari相信这个号码有更具体的用途,所以它不再把我的大号码默认为电话链接。@davidcondrey建议使用<a href="tel:18001234567">1-800-123-4567</a>来指定数字的用途,也是如此。

总之,Safari Mobile显然很注意语义。考虑到HTML5是围绕语义标记构建的,而搜索引擎也依赖于语义标记,我打算尽可能多地使用它。