如何才能使<a href>仅在移动设备上有效？

Question

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

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

如何使其显示为非电话设备(计算机,平板电脑,笔记本电脑)的纯文本,以便它不会返回404错误并且无法单击？

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

Answer 1

不要使用超链接.使用微数据.手机会识别出它是一个电话号码并允许它被点击,但它不会影响普通的网络浏览器.

<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:链接的好处超过了任何缺点或凌乱的替代方案.