How to disable a link to call a phone number when not on mobile devices?

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.

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, Aug 02 '13 at 00:13

score 4 · Answer 1 · answered Aug 06 '13 at 11:42

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.

score 1 · Accepted Answer · edited May 23 '17 at 12:08

1

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

edited May 23 '17 at 12:08

Community

1
1

answered Aug 01 '13 at 23:12

Jackson

9,188
6
52
77

I believe this is exactly what I am looking for. So from how I read this, first you are defining the variable of mobile, then your function if not mobile, will select the href, but then what is it doing? – JGallardo Aug 06 '13 at 16:14
1

It's setting the href to a "dummy" hash value. A hash takes you no-where, so essentially the link becomes disabled. – Jackson Aug 07 '13 at 10:22

How to disable a link to call a phone number when not on mobile devices?

2 Answers2