[html5] Detect support for tel: uri scheme or better markup for phone numbers
derernst at gmx.ch
Thu Jan 10 06:59:36 PST 2013
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.
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.
More information about the Help