html - 如何去除 iPhone/iOS 上电话号码的蓝色样式？

Question

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

我只有这个号码:

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

并且没有超链接，但 iPhone 仍将此文本编号呈现为超链接。我的某些网站存在此呈现问题，但不明白为什么会出现这种情况。

我确实看过这篇文章:

Mobile HTML rendering numbers

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

Answer 1

两种选择……

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 .