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

Question

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

那么在移动设备上，这将既是号召性用语，又是实际要调用的方法。

我现在需要解决的挑战是，只能在移动设备上使用呼叫功能。这是我当前的代码：

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

[GitHub 上的代码要点 - 用于附加评论]

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

这会产生以下错误：

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

Answer 1

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

您的代码可能如下所示：

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

有关详细信息，请参阅pointer-events属性文档。