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

我只有这个号码:

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

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

我确实看过这篇文章:

Mobile HTML rendering numbers

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

最佳答案

两个选项……

1。设置format-detection元标记。

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

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

查看更多Apple-Specific Meta Tag Keys .

Note: If you have phone numbers on the page with these numbers you should manually format them as links:

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

2。无法设置元标记？想用css ?

两个 css选项:

选项 1(更适合网页)

使用 href 的目标链接以 tel 开头的值通过使用这个 css 属性选择器:

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 电子邮件中)，您可以将电话号码包含在链接/ anchor 标记 (<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 .

https://stackoverflow.com/questions/3736807/