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

Question

What I would like to build is a button that will allow the user to call in. On desktop this element will look like a big call-to-action,

then on mobile this will be both a call-to-action and an actual method to call.

The challenge that I need to address now is that the ability to call should be only present when on mobile. This is my current code:

<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]

But when on desktop (dictated by screen width?) this link should be deactivated. At the moment if someone happens to click on this from desktop, it attempts to open a page as "tel:888-336-1301"

Which produces the following error:

The address wasn't understood Firefox doesn't know how to open this address, because the protocol (tel) isn't associated with any program.

Answer 1

Another idea, that doesn't involve JavaScript, is to use CSS pointer-events property. Use media query to target devices that may not have the ability to make calls and for them, set pointer-events property to none . This way, clicking on the link won't have any effect.

Your code could look like this:

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

See pointer-events property documentation for details.

Answer 2

Use a mobile detection script, like the one in the accepted answer here: Detecting a mobile browser

Then

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