Question

我想添加此代码，以便在点击时自动将我网站上的联系人详细信息跳转到移动拨号盘/地址簿中：

<a href="tel:12345555555">Call Us Now</a>

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

很高兴使用HTML / CSS / JS的任意组合来实现这一目标。

Answer 1

不要使用超链接。使用microdata。手机会识别出它是一个电话号码并允许它被点击，但它不会影响正常的网络浏览器。

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

Answer 2

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

为什么？

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

因此，请将其作为常规链接。也许通过链接电话号码可以明显看出来，这样桌面上没有电话软件的人就会明白，点击它时不会发生任何事情。

Call Us Now at <a href="tel:12345555555">(234) 555-5555</a>

此外，请记住，tel:链接不会导致404错误，因为永远不会生成HTTP请求。在我没有tel:处理程序的计算机上，Chrome根本没有做任何事情，IE9说“此网页上的某些内容或文件需要您尚未安装的程序。”（合理），和Firefox说“ Firefox不知道如何打开这个地址，因为协议（tel）与任何程序无关。”（也是合理的）。

当我遇到这个问题时，我认为离开tel:链接的好处超过了任何缺点或凌乱的替代方案。

Answer 3

我正在使用以下带有Media Queries的CSS来实现此目标。

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

它基于on this question

Answer 4

我遇到了同样的问题，并开始使用元标记进行格式检测：

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

对于同样问题的讨论： Disable telephone number detection on iPad desktop web links?

如何制作<a href=""> only active on mobile devices?</a>

4 个答案: