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

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 不知道如何打开此地址，因为协议(protocol) (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了解详情。