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

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

我只有这个号码:

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

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

我没看过这个post:

移动HTML呈现数字

但这是唯一可能的解决scheme吗?

两个选项…

1.设置format-detection元标记。

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

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

查看更多苹果专用Meta标签密钥 。

注意:如果您的网页上有这些电话号码,则应手动将其格式化为链接:

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

2.不能设置元标记? 想使用CSS

如果您无法设置元标记(例如在HTML电子邮件中),请使用链接/定位标记( <a href=""></a> )中的电话号码,然后使用与以下类似的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; } 

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

或者,你可以使用这个CSSselect器,以tel开头的目标链接。

 a[href^="tel"] { /* css propery: value pairs here */ } 

只是要详细说明大卫·托马斯的早期build议:

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

将此添加到您的CSS留下电话号码的function,但剥离下划线,并匹配您原来使用的颜色。

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

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

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

我还没有看到文档,build议一个类被应用到电话号码链接,所以你必须添加类/ ids链接,你有不同的风格。

或者,您可以使用以下方式设置链接的样式

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

这是iPhone所能理解的,不会被任何其他UA应用(据我所知,也许Android,黑莓等用户/开发人员可以评论)。

如果用户在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;} 

由于我们在一个带有电话图标的网站上使用电话:链接:在这里发布的大多数解决scheme之前,都会引入另一个问题

我使用元标记:

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

这结合指定电话:链接整个网站应该链接的地方!

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

一个古老的问题,但作为上述答案都不是好的我后我如何解决它

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

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

CSS:

 .phone_menu{ color:orange; } 

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

 .phone_menu a{ color:orange; } 

简单的把戏为我工作,在电话号码的中间添加一个隐藏的对象。

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

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

根据博史密斯从这个主题: 如何删除iPhone / iOS上的电话号码的蓝色风格?

您应该在链接的href属性中应用“tel:”,如下所示:

 <a href="tel:5551231234">555 123-1234</a> 

它将删除任何额外的风格和DOM到电话号码string。

我一直在前后

1。

  <a href="tel:5551231234"> 

2。

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

试图使相同的代码适用于桌面和iPhone。 问题是,如果使用第一个选项,并且您从桌面浏览器单击该选项,则会显示一条错误消息,如果使用第二个选项,则会禁用iPhone iOS5上的Tab-to-Callfunction。

所以我尝试了一下,结果iPhone将电话号码视为一种可以用CSS格式化的特殊链接types。 我把这个数字包装在一个地址标签中(它可以和任何其他的HTML标签一起工作,只是避免使用<a>标签),并在CSS中将其设置为

 .myDiv address a {color:#FFF; font-style: normal; text-decoration:none;} 

它的工作原理 – 在桌面浏览器中显示一个纯文本,并在Safari移动显示作为链接与呼叫/取消窗口popup在选项卡上,没有默认的蓝色和下划线。

只要注意应用于数字的CSS规则,特别是在使用填充/边距时。

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

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

<meta name="format-detection" content="telephone=no"> 。 此元标记适用于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并使用此脚本进行调整。 根据需要调整replace模式。

 $('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>'); 

如果你不打算在你的页面上有任何电话号码,那么<meta name="format-detection" content="telephone=no">就可以正常工作。 但从修辞的angular度来看,如果你打算使用手机和非手机号码的混合呢?

假设你只是将数字硬编码到你的HTML中,那么“在你的数字中间插入东西”将会起作用。 但是对于dynamic页面来说,它们是没有用处的,例如使用PHP从查询中输出数字数据。

举个例子,我正在创build一个城市人口清单。 一些人口足以让移动Safari浏览器变成电话号码链接。 幸运的是,我所要做的只是在数组输出周围使用PHP number_format()来插入“数千”逗号:

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

这种格式足以说服移动Safari浏览器,这个号码有一个更具体的目的,所以它没有默认我的大号电话链接了。 @davidcondreybuild议使用<a href="tel:18001234567">1-800-123-4567</a>来指定数字的用途。

底线是,Safari移动显然确实注意语义。 鉴于HTML5是围绕语义标记build立的,而search引擎依赖于语义标记,我打算尽可能地使用它。

把数字放在一个<fieldset>将会阻止iOS将数字转换为链接,出于某种原因。 在某些情况下,这可能是正确的解决scheme。 我并不主张全面禁用转换为链接。

尝试在数字分隔之间使用短划线的ASCII字符。

由此: –

对此: &ndash;

例如:更改555-555-5555 => 555&ndash;555&ndash;5555

这对我来说是这样的:

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

你可以在这里find更多的信息。

在Joomla Yootheme为我工作:

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

iOS使默认情况下的电话号码可点击(出于显而易见的原因)。 当然,如果你的电话号码还不是一个链接,那么就会增加一个额外的标签来覆盖你的样式。

为了解决这个问题,尝试添加到你的样式表: a[href^=tel] { color: inherit; text-decoration: none; } a[href^=tel] { color: inherit; text-decoration: none; }

这应该保持你的电话号码风格如你所愿,而不增加额外的标记。

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

如果你只是想尽量避免使用字体标签的电话号码链接:

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