检查是否<a href=“tel:5555555”>支持</a>

Question

Is it possible to check if a phone number hyperlink is supported by a browser? EG: Check if

<a href="tel:555555555">Call us on 555555555</a> 

will work.

I'm trying to avoid the "Cannot open page. Safari cannot open the page because the address is invalid." type messages on things like iPod/iPad etc.

Thanks.

Answer 1

On desktop Skype uses the "callto:" spec instead of "tel:"

I think you could use css for this.

Just add some @media rules:

.telClass { display: none; }
.callToClass { display: block; } 

@media only screen and (max-device-width: 480px) {
    .tel-class { display: block; }
    .call-to-class { display: none; }
}

Then you could define two elements in html:

<a href="tel:555555555" class="tel-class">Call us on 555555555</a> 
<a href="callto:555555555" class="call-to-class">Call us on 555555555</a> 

For a more complex code you could add some javascript code to check if the device is a handheld one:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
   var callToArray = document.getElementsByClassName('call-to-class');
   callToArray.forEach(function(c) {
      c.parentElement.removeChild(c);
   });
}

Also there is a nice answer here by ghepting on how to to detect if skype is installed or not.