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

Question

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

然后在移动设备上，这将是一个号召性用语和一个实际的呼叫方法。

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

<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）与任何程序都没有关联。

Answer 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。

Answer 2

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

然后

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