cross browser - Click to call html

Question

I want to use html5 tag in my website for mobile view when user click on this link from mobile device it will place a call on the given number..

<p>Book now, call <a href="tel:01234567890">01234 567 890</a></p>

What should I do to hide this link when user mobile is non html5.. I have gone through modenizer but seems it will not detect the link attribute. http://www.tutorialspoint.com/html5/html5_modernizr.htm

Any suggestion? This button will only appear when my website is opened on mobile device and for mobile devices I want to hide this link when opened in old mobile..

Answer 1

tl;dr What to do in modern (2018) times? Assume tel: is supported, use it and forget about anything else.

---

The tel: URI scheme RFC5431 (as well as sms: but also feed:, maps:, youtube: and others) is handled by protocol handlers (as mailto: and http: are).

They're unrelated to HTML5 specification (it has been out there from 90s and documented first time back in 2k with RFC2806) then you can't check for their support using tools as modernizr. A protocol handler may be installed by an application (for example Skype installs a callto: protocol handler with same meaning and behaviour of tel: but it's not a standard), natively supported by browser or installed (with some limitations) by website itself.

What HTML5 added is support for installing custom web based protocol handlers (with registerProtocolHandler() and related functions) simplifying also the check for their support through isProtocolHandlerRegistered() function.

There is some easy ways to determine if there is an handler or not:" How to detect browser's protocol handlers?).

In general what I suggest is:

1. If you're running on a mobile device then you can safely assume tel: is supported (yes, it's not true for very old devices but IMO you can ignore them).
2. If JS isn't active then do nothing.
3. If you're running on desktop browsers then you can use one of the techniques in the linked post to determine if it's supported.
4. If tel: isn't supported then change links to use callto: and repeat check desctibed in 3.
5. If tel: and callto: aren't supported (or - in a desktop browser - you can't detect their support) then simply remove that link replacing URL in href with javascript:void(0) and (if number isn't repeated in text span) putting, telephone number in title. Here HTML5 microdata won't help users (just search engines). Note that newer versions of Skype handle both callto: and tel:.

Please note that (at least on latest Windows versions) there is always a - fake - registered protocol handler called App Picker (that annoying window that let you choose with which application you want to open an unknown file). This may vanish your tests so if you don't want to handle Windows environment as a special case you can simplify this process as:

1. If you're running on a mobile device then assume tel: is supported.
2. If you're running on desktop then replace tel: with callto:. then drop tel: or leave it as is (assuming there are good chances Skype is installed).