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

Posted 2023-02-25

【中文标题】如何在 iPhone/iOS 上删除电话号码的蓝色样式？

【英文标题】：How do I remove the blue styling of telephone numbers on iPhone/iOS?

【发布时间】：2011-04-13 19:15:24

【问题描述】：

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

我只有这个号码：

<p id="phone-text">Call us on <strong>[phone]</strong></p>

并且没有超链接，但 iPhone 仍将此文本编号呈现为超链接。我在我的一些网站上遇到了这个渲染问题，但不知道为什么会这样。

我确实看过这篇文章：

Mobile html rendering numbers

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

【问题讨论】：

不完全确定这是否是同一件事，你能检查一下吗？ ***.com/questions/3712475/…

@Pekka：我认为这个问题相似但又不同。那是为了防止某些东西被错误地解释为电话号码。这似乎是为了防止真实的电话号码影响您的设计。

How to disable phone number linking in Mobile Safari?的可能重复

【参考方案1】：

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

【参考方案2】：

两个选项……

1。设置format-detection 元标记。

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

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

查看更多Apple-Specific Meta Tag Keys。

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

<a href="tel:[phone]">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 电子邮件模板）

或者，当您无法设置元标记时（例如在 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;

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

【讨论】：

您好，博史密斯，感谢您的回答。不久前最终使用了您的第一个解决方案...只是想知道是否有其他解决方案。

@Beau Smith，这对我也有用，但不适用于第一代 iPod 的 Safari。该旧浏览器是否有任何特定标签？

45 个答案，但仍未解决？ :)

这就是答案。有一个联系页面，这些号码不会出现在 iPad 和 iPhone 上。这成功了，谢谢！

RE 使用 'tel:' 链接标记电话号码：还建议使用微格式作为替代方案 (ux.stackexchange.com/a/21121/36009)。

【参考方案3】：

这个 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>[phone]</strong></p>

【参考方案4】：

默认情况下，ios 使电话号码可点击（原因很明显）。当然，如果您的电话号码还不是链接，这会添加一个额外的标签，该标签会覆盖您的样式。

要修复它，请尝试将其添加到您的样式表中：a[href^=tel] color: inherit; text-decoration: none;

这应该使您的电话号码保持您期望的样式，而无需添加额外的标记。

【参考方案5】：

将数字放入

会阻止 iOS 出于某种原因将数字转换为链接。在某些情况下，这可能是正确的解决方案。我不主张全面禁止转换为链接。

【参考方案6】：

在 Joomla Yootheme 中为我工作：

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

【参考方案7】：

只是为了详细说明 David Thomas 早先的建议：

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

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

奇怪的是我可以发布自己的答案，但我不能回复别人的..

【讨论】：

这是最好的解决方案，但我相信它应该是这样的：a[href^="tel"] color:inherit;文字装饰：无；至少这对我有用。您需要这里提到的双引号 (" ")：***.com/questions/3859101/what-does-ahref-do-in-css

我已经添加了引号。虽然它可以在不使用引号的情况下工作，但 CSS 规范确实需要它们作为字符串。谢谢 Panagiotis。

谢谢！这一直让我发疯。保留功能的最佳答案（并且应该是公认的答案！）

【参考方案8】：

如果您不打算在页面上显示任何电话号码，那么 <meta name="format-detection" content="telephone=no"> 会工作得很好。但从修辞上讲，如果您打算同时使用电话号码和非电话号码怎么办？

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

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

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

这种格式足以让 Mobile Safari 相信该号码有更具体的用途，因此它不再将较大的号码默认为电话链接。 @davidcondrey 提出的使用 <a href="tel:[phone]">1-800-123-4567</a> 指定号码用途的建议也是如此。

底线是 Safari Mobile 显然确实关注语义。鉴于 HTML5 是围绕语义标记构建的，而搜索引擎依赖于语义标记，我打算尽可能多地使用它。

【参考方案9】：

<meta name="format-detection" content="telephone=no">。此元标记适用于 iOS 设备上的默认 Safari 浏览器，并且仅适用于未包含在电话链接中的电话号码，因此

1-800-123-4567
<a href="tel:[phone]">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?(\d3)\D?\D?(\d3)\D?(\d4)/g, '<a href="tel:+1$1$2$3">($1) $2-$3</a>'));

没有 jQuery 甚至更好

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

【参考方案10】：

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

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

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

【讨论】：

它可以工作，但会破坏链接功能。对于在紧要关头需要的东西（比如今天）没关系。

您的示例对我不起作用，但零宽度连接器 ‍成功了。

【参考方案11】：

由于我们在网站上使用 tel: 链接并在 : 上使用电话图标，因此此处发布的大多数解决方案都会引入另一个问题。

我使用了元标记：

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

这与指定 tel: links 站点范围内应该链接的位置相结合！

使用 css 确实不是一种选择，因为它隐藏了相关的电话链接。

【讨论】：

谢谢你！在 Cordova/Ionic 上完美运行。

【参考方案12】：

一个老问题，但由于上述答案都对我没有好处，我发布了我是如何解决它的

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

<li class="phone_menu">[phone]</li>

css:

.phone_menu
  color:orange;

但在 iPad/iPhone 上它是黑色的，所以我只是将其添加到 css 中：

.phone_menu a
  color:orange;

【参考方案13】：

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

【参考方案14】：

如果人们在 Google 上找到此问题，您只需将电话号码视为一个链接，因为 Apple 会自动将其设置为一个。

你的 HTML

<p id="phone-text">Call us on <strong>[phone]</strong></p>

你的 CSS

#phone-text acolor:#fff; text-decoration:none;

【讨论】：

这是我一直在寻找的，所有*** cmets 都没有明确提及。

【参考方案15】：

我一直在来回走动

1.

    <a href="tel:[phone]">

2.

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

尝试使相同的代码适用于桌面和 iPhone。问题在于，如果使用第一个选项并且您从桌面浏览器中单击它，则会显示错误消息，如果使用第二个选项，则会禁用 iPhone iOS5 上的选项卡呼叫功能。

所以我反复尝试，结果发现 iPhone 将电话号码视为一种特殊类型的链接，可以使用 CSS 进行格式化。我将数字包装在地址标签中（它可以与任何其他 HTML 标签一起使用，只是尽量避免使用<a> 标签）并在 CSS 中将其样式化为

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

它起作用了——在桌面浏览器中显示纯文本，在 Safari 移动设备中显示为链接，在选项卡上弹出呼叫/取消窗口，没有默认的蓝色和下划线。

请注意应用于数字的 css 规则，尤其是在使用填充/边距时。

【参考方案16】：

这是为我做的：

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

您可以找到更多信息here。

【参考方案17】：

尝试在数字分隔符之间使用 ASCII 字符作为破折号。

从此：-

对此：–

例如：更改555-555-5555 => 555–555–5555

【参考方案18】：

如果您只是想避免电话号码成为链接，请尝试使用字体标签：

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

【参考方案19】：

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

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 等用户/开发者可以评论）。

【讨论】：

使用a[href^=tel:] 可能是个好主意，这样您就不会意外地将href 匹配到telephone.html 等。

@MattiasWadman 您的建议在 Chrome 或移动 Safari 中对我不起作用。