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

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

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

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

我确实读过这篇文章:

移动HTML渲染数字

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


当前回答

iOS在默认情况下允许点击电话号码(原因很明显)。当然,这会增加一个额外的标签,如果你的电话号码不是一个链接,它会覆盖你的样式。

要解决这个问题,请尝试将以下内容添加到样式表中:文字修饰:没有;}

这应该保持您的电话号码样式为您所期望的,而不增加额外的标记。

其他回答

我来详细阐述一下David Thomas之前的建议:

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

将此添加到css中会保留电话号码的功能,但会去掉下划线并匹配您最初使用的颜色。

这对我来说很管用:

.appleLinks a {color:#000000;}
.appleLinksWhite a {color:#ffffff;}

你可以在这里找到更多信息。

这个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>

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

我使用元标签:

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

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

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

如果您不打算在您的页面上有任何电话号码,那么 <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是围绕语义标记构建的,而搜索引擎也依赖于语义标记,我打算尽可能多地使用它。