html - "tel:"URL 在非移动浏览器上导致错误页面

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: 链接，无论它们是否能够处理电话号码。