[html5] Detect support for tel: uri scheme or better markup for phone numbers

[Markus Ernst]

Hello

A client asked me to mark up phone numbers in the website we are 
developping the way that they are clickable on mobile phones. Now when I 
mark them up somehow like <a href="tel:+31123456789">012 345 67 89</a>, 
the numbers will still be rendered as clickable links in non-supporting 
browsers, resulting in ugly warnings.

I tried to find out some way to detect support for this uri scheme, so I 
could mark up the phone numbers as <span class="phone"> and replace this 
by the <a> element where supported. But most forums discussing this 
suggest some sort of ua sniffing or consider viewport widths under 480px 
as mobile devices. I don't like this, as it does not reliably detect 
telephone functionality. Browsers with something like Skype installed 
will not be detected, and even my phone has more than 480 pixels 
viewport width when in landscape position.

Is there a recommended and reliable way to detect whether tel: links are 
supported? Or is there a better way to mark up phone numbers anyway? I'd 
be happy to be pointed to further information. Thanks.

<aside>
Personnally I think that tel: and mailto: uri schemes are actually not a 
satisfying way to mark up phone numbers resp. e-mail addresses. 
Something like <span role="phonenumber" target="+0123456789"> would be 
better, as UAs were free to apply all kind of functionalities they are 
configured to, and non-supporting browsers would just ignore them 
instead of displaying ugly error messages.
</aside>