Dealing with tel: anchor

Question

I have an anchor to a telephone number. On phones is great. On desktops with Skype or Google Voice it's good. The problem is on desktops that just don't know how to deal with that.

What should I do? Detect if it's not mobile and change the link? I still want the link to show, just the URL to be different.

Is there a better way? If not, how do I detect mobile in JavaScript in order to change the href attribute?

Thank you.

Answer 1

To detect if the browser is launching from a mobile in JavaScript: http://detectmobilebrowser.com/

Then you can detect a phone number in JavaScript using a regular expression, such as one of those:http://www.regxlib.com/DisplayPatterns.aspx?cattabindex=6&categoryId=7

And finally rewrite the link: aLink.href="..."

The web-browser is responsible for launching the associated application for a certain link and I guess skype is registering for the phone numbers in the desktop. You can't do anything from the web-page I'm afraid.

Answer 2

The way that I've found to get around this is to use two separate links, although I am using the Foundation 4 framework, so not sure if this is available in other responsive frameworks.

I give the link that I want to use the "tel" anchor the class.hide-for-large, and the link to the contact page a class of.hide-for-small. This effectively hides and dhows the respective link, dependent upon the detected viewport width.

I'm sure there will be a similar class in something like Bootstrap. Of course, if you aren;t