“tel:” URL 导致非移动浏览器上的错误页面答案

【问题标题】："tel:" URLs lead to error page on non-mobile browsers“tel:” URL 导致非移动浏览器上的错误页面
【发布时间】：2013-06-27 18:45:02
【问题描述】：

在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; }

我该如何解决这个问题？

【问题讨论】：

标签： html css hyperlink phone-number

【解决方案1】：

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

【讨论】：

【解决方案2】：

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 才能使其适用于所有浏览器（而不是依赖CSS3href^="tel"位）
它不会删除链接行为，只是将其隐藏一点。当然，您也可以轻松地完全隐藏tel: 链接，方法是默认设置display: none，在移动设备上设置display: inline
它将在任何移动设备上显示tel: 链接，无论它们是否能够处理电话号码。

【讨论】：

实际上，如果您在桌面浏览器的链接上指定pointer-events:none，它将删除链接行为。 :-)
屏幕宽度并不是确定设备是否能够拨打电话的良好试金石。此外，使用媒体查询来撤消样式，然后在媒体查询中重做样式是一种不好的做法。只需在反向媒体查询中撤消它们即可。你最终会得到更少的 CSS 来做同样的事情。
@cimmanon 是的，这是一个非常有限的解决方案，我希望看到其他人与之竞争（即，基于 JS/jQuery 的移动检测，可在文档加载时准备链接）。对于反向媒体查询，那些根本不支持媒体查询的旧浏览器不会被捕获，不是吗？
唯一不支持媒体查询的旧桌面浏览器是 IE。整个移动优先方法基于这样一个概念，即您更有可能在不支持媒体查询的移动浏览器上运行，而不是在不支持媒体查询的桌面浏览器上运行。无论哪种方式，在这种情况下，移动优先都会获胜，因为 CSS 会更小。