不在移动设备上时如何禁用拨打电话号码的链接？答案

【问题标题】：How to disable a link to call a phone number when not on mobile devices?不在移动设备上时如何禁用拨打电话号码的链接？
【发布时间】：2013-08-06 19:42:39
【问题描述】：

我想要构建一个允许用户调用的按钮。在桌面上，这个元素看起来像是一个很大的号召性用语，

然后在移动设备上，这既是号召性用语，也是实际的调用方法。

我现在需要解决的挑战是只有在移动设备上才能进行通话。这是我当前的代码：

<div id="headerCTA">
  <div>
    <a href="tel:888-336-1301">
      <div>
        Schedule a pickup<br>
        888-336-1301
      </div>  
    </a>
  </div>
</div>

[Code gist on GitHub - for additional commenting]

但是当在桌面上时（由屏幕宽度决定？）这个链接应该被禁用。目前，如果有人碰巧从桌面点击它，它会尝试打开一个页面为“tel:888-336-1301”

这会产生以下错误：

地址不被理解 Firefox 不知道如何打开此地址，因为协议 (tel) 未与任何程序关联。

【问题讨论】：

我认为没有必要“修复”这个问题，因为这是预期的行为。可以将电话协议绑定到某些程序，这样您就可以从桌面拨打电话。

标签： javascript media-queries href

【解决方案1】：

另一个不涉及 JavaScript 的想法是使用 CSS pointer-events 属性。使用媒体查询来定位可能无法拨打电话的设备，并将pointer-events 属性设置为none。这样，点击链接不会有任何效果。

您的代码可能如下所示：

@media only screen 
and (min-device-width : 768px){
  #headerCTA a{
   pointer-events: none;
  }
}

详情请见pointer-events property documentation。

【讨论】：

【解决方案2】：

使用移动检测脚本，例如此处接受的答案中的脚本：Detecting a mobile browser

然后

var mobile = mobilecheck();
if (!mobile) {
  document.getElementById('telephone-link').href = '#';
}

【讨论】：

我相信这正是我想要的。所以从我的阅读方式来看，首先你定义了mobile的变量，然后你的函数如果不是mobile，将选择href，但是它在做什么？
它将 href 设置为“虚拟”哈希值。散列不带你去任何地方，所以基本上链接会被禁用。