Question

在this网站上，我有一个指向右上角移动设备电话号码的链接，其中显示了手机号码。在桌面上，点击此链接时，Chrome只会忽略该链接，但firefox和Internet Explorer会重定向到错误页面。

HTML：

<a href="tel:+491796737741" class="contact-info" ></a>

CSS：

#header .contact-info { width: 293px; height: 133px; display: block; float: right; cursor: pointer; background: url(contact-info.png) 0 0 no-repeat transparent; margin-right: 20px; margin-top: 110px; }

我该如何解决这个问题？

Answer 1

This german-language blog显示了一个简洁的解决方法，可以与支持CSS3的浏览器配合使用。首先，默认情况下，您的tel:链接看起来像普通文本：

a[href^="tel"]:link,
a[href^="tel"]:visited, 
a[href^="tel"]:hover {
    text-decoration:    none;
    color: #000;
}

然后，你给他们类似链接的样式，但只在移动设备上：

@media only screen and (max-device-width: 480px) {
  a[href^="tel"]:link,
  a[href^="tel"]:visited,
  a[href^="tel"]:hover {
      text-decoration:    underline;
      color: blue;
   }
}

这有几点需要注意：

它不适用于古老的桌面浏览器（IE7等） - 您必须为每个tel:链接指定一个特定的class，以便与所有浏览器一起使用（而不是依赖CSS3 href^="tel"位）
它不会删除链接行为，只是隐藏一下。当然，您也可以通过默认设置tel:和移动设备上的display: none来轻松完全隐藏display: inline链接
它会在任何移动设备上显示tel:个链接，无论他们是否能够处理电话号码。

Answer 2

尝试解决此问题是一个坏主意，因为PC能够为tel链接添加处理程序。例如，在我的电脑上，Skype已设置为处理这些链接。

“tel：”URL会导致非移动浏览器出现错误页面

2 个答案: