當不在移動設備上時，如何禁用鏈接以撥打電話號碼？

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的想法是使用CSS pointer-events屬性。 使用媒體查詢將目標定位為可能無法進行呼叫的設備，並將它們的pointer-events屬性設置為none 。 這樣，單擊鏈接不會有任何效果。

您的代碼可能如下所示：

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

有關詳細信息，請參見pointer-events屬性文檔 。

Answer 2

使用移動檢測腳本，如此處接受的答案中的腳本： 檢測移動瀏覽器

然后

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