48

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..

Umair Rana
  • 683
  • 1
  • 6
  • 13
  • 1
    **It's not related to HTML 5**, applications and plug-ins can add protocol handlers (such as Skype) but there is not a simple way to determine if a protocol is handled or not. – Adriano Repetti Sep 28 '14 at 19:08
  • I just want to hide that link when mobile browser is not html5. In the above mentioned link of modernizer it will not detect that.. – Umair Rana Sep 28 '14 at 19:14
  • 4
    it doesn't matter if browser knows HTML 5 or not. It doesn't matter if browser is new or not. Very old (HTML 5 unaware) Safari for iPhone or IE8 on desktop will/may _understand_ callto: or tel: protocol handlers. **Check based on HTML5 is pretty...useless**. – Adriano Repetti Sep 28 '14 at 19:28
  • 1
    What you have to check is if a protocol handler is supported or not, for a nice idea take a look to [this post](http://stackoverflow.com/questions/836777/how-to-detect-browsers-protocol-handlers) here on SO. – Adriano Repetti Sep 28 '14 at 19:34
  • it doesn't matter if browser knows HTML 5 or not. It doesn't matter if browser is new or not. Very old (HTML 5 unaware) Safari for iPhone or IE8 on desktop will/may understand callto: or tel: protocol handlers. Check based on HTML5 is pretty...useless. Are you sure about this? I think this is the solution then.. I was wondering that it is introduced in html5.. – Umair Rana Sep 28 '14 at 19:52
  • Yes, I am. What HTML 5 added is support (pretty poor so far) for registering/checking custom protocol handlers (and check for existing support via `isProtocolHandlerRegistered()` function). AFAIK support for `tel:` (and others _mobile_ protocol handlers) has been added **by Apple at least in...2007**. Old enough to be considered _old_ and without HTML 5 support? Problem is that desktop browsers won't (probably) understand it (AFAIK Skype installs a p.h. for `callto:` but other applications may understand `tel:` as well). – Adriano Repetti Sep 29 '14 at 07:49

2 Answers2

78

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).
Community
  • 1
  • 1
Adriano Repetti
  • 65,416
  • 20
  • 137
  • 208
  • Could you expand on `` or post a reference to a guide/docs for using this, please? – Cody Jul 15 '15 at 17:10
  • 2
    @Cody full specification for geo: in [RFC5870](https://tools.ietf.org/html/rfc5870). geo: and maps: have roughly same _syntax_ (even if they serve a different purpose). Quick [introduction from Wikipedia](https://en.wikipedia.org/wiki/Geo_URI). – Adriano Repetti Jul 16 '15 at 12:18
  • 2
    Just for completeness, the tel: URI scheme is [RFC3966](https://tools.ietf.org/html/rfc3966). – Christian Hujer Nov 08 '16 at 22:00
2

Use this,

<a href="tel:XXX-XXX-XXXX">XXX-XXX-XXXX</a>
Alish Giri
  • 1,855
  • 18
  • 21