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

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.

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

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.

• javascript
• media-queries
• href

• I don't see a need to "fix" this as it is expetected behaviour. Its possible to bind the tel-protocol to certain programs, that lets you make calls from you desktop. – Raoul Commented Aug 2, 2013 at 0:13

2 Answers 2

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.

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 = '#';
}