如何使<a href>仅在移动设备上可用？

Question

我想添加这段代码，使我的网站上的联系方式在点击时自动跳转到手机拨号盘/通讯录：

<a href="tel:[phone]">Call Us Now</a>

如何将它显示为非电话设备（计算机、平板电脑、笔记本电脑）的纯文本，以便它不会返回404错误并且不能被点击？

愿意使用任何HTML/CSS/JS的组合来实现这一点。

- Dom

Answer 1

不要使用超链接，使用微数据。移动电话将识别它为电话号码并允许点击，但它不会影响普通的网页浏览器。

<div class="vcard">
    <div class="tel">
        12345555555
    </div>
</div>

- John Conde

---

如果我有更多的声望，我会添加赏金来奖励这个答案。非常感谢你与我分享这些信息。 - Dom

微数据是一个很好的解决方案。我曾考虑过对Web服务器进行重写，以捕获 tel:######### 请求并将其发送到联系页面。但如果用户代理能够处理微数据，那就更好了。 - SunSparc

太好了！另外，如果你在意网站上电话号码的呈现方式，你可以按照以下格式进行排版：[phone]（带或不带连字符/括号）。 - toad

如果我在不包含<a href="tel:...">的情况下添加微数据，移动设备仍然无法点击它。 - user151496

Answer 2

这可能并不直接回答问题，但我要质疑您需要在其他设备上隐藏呼叫链接的假设。

为什么呢？

• 非手机设备仍然可以拨打电话。例如，带有VoIP客户端的PC可以处理tel:链接。
• 平板电脑（iPad和Android）通过允许用户将号码添加到他们的联系人来处理tel:链接，这无疑会被同步到他们的手机中-这对您的用户来说是一个很好的便利。
• 依赖自动格式检测是一种hack。

所以只需将其保留为常规链接即可。也许通过链接电话号码来使其明显，这样那些没有电话软件的桌面用户就会明白点击它时什么也不会发生。

Call Us Now at <a href="tel:[phone]">[phone]</a>

此外，请记住，tel:链接不会导致404错误，因为不会生成HTTP请求。在我的机器上没有tel:处理程序时，Chrome什么也不做，IE9显示“此网页上的某些内容或文件需要一个未安装的程序。”（合理），而Firefox则显示“Firefox不知道如何打开此地址，因为协议（tel）未与任何程序关联。”（也是合理的）。

当我面临这个问题时，我决定保留tel:链接的好处大于任何缺点或混乱的替代方案。

- josh3736

---

这是一个很好的答案，提供了一些很有价值的思路，我已经点赞了。我会在进一步研究并做出决定后接受这个答案。感谢您的贡献。 - Dom

在不支持的设备上，在页面上放置链接指向错误页面似乎是糟糕的用户体验设计。这就是为什么你希望在不支持的设备上隐藏呼叫链接。 - tmsimont

RFC 3966也建议链接号码，并且在硬拷贝打印输出上是必不可少的（可以说是不支持跟随tel: URL的极端情况）。 - Toby Speight

Answer 3

我使用下述CSS与媒体查询来实现此功能。

@media screen and (min-width: 768px) {
    a[href*="tel:"] {
        cursor:default;
    }
}

这个问题的基础是关于it技术的。

- Marcio Mazzucato

Answer 4

我曾经遇到过同样的问题，开始使用元标签进行格式检测：

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

根据这个讨论，有相同的问题： 如何在iPad桌面网页链接中禁用电话号码检测？

- SergeantHacker

---

这种方法还会在手机上禁用电话号码检测，而这在本例中是不希望的。 - josh3736