Du wirst Dich sicherlich fragen, warum ich in der Einleitung "Telefonnummern explizit verlinken" geschrieben habe. Das ist der Tatsache geschuldet, dass Smartphones versuchen Telefonnummern implizit zu verlinken. Diese Links können dann im Smartphone aufgerufen werden um die Telefonnummer anzurufen oder eine SMS dorthin zu schicken. Es kann nun vorkommen, dass längere Folgen von Ziffern (z.B. Artikelnummern von Produkten, Kontonummern, o.ä.) fälschlicherweise als Telefonnummer vom System erkannt werden. Diese erzeugten Links sind natürlich unbrauchbar. Um dieses Verhalten zu deaktivieren gibt es den meta-Tag format-detection. Er wird im head-Bereich des Quellcodes platziert.
<meta name="format-detection" content="telephone=no" />Telefonnummern verlinken
Nachdem wir nun die automatische Verlinkung deaktiviert haben, geht es nun natürlich darum, wie man diese Verlinkungen selbst erstellen kann und welche Möglichkeiten es gibt.
<a href="tel:+4912312345678">+49 123 1234 5678</a>
<a href="sms:+4912312345678">Sende eine SMS</a>
<a href="fax:+49123123456789">+49 123 1234 5678 9</a>- tel: verlinkt eine Telefonnummer. Beim Aufrufen des Links wird die hinterlegte Nummer angerufen.
- fax: verlinkt, wie soll es auch anders sein, eine Faxnummer.
- sms: hat die Eigenschaft, dass beim Aufrufen der SMS-Editor mit der hinterlegten Telefonnummer als Empfänger beim Smartphone-User geöffnet wird.
Links für Desktop-User deaktivieren
Für Benutzer, die mit einem Desktop-Endgerät die Seite besuchen, sind diese Links nicht verwendbar. Im Opera wird beispielsweise diese Fehlermeldung angezeigt.
Um das Aufrufen der Links für Desktop-User nun zu deaktivieren, verwenden wir ein bisschen jQuery-Code.
$('a[href^="tel:"], a[href^="fax:"], a[href^="sms:"]').click(function() {
if (navigator.userAgent.search(/(Android|iPhone|Windows Phone|Blackberry)/i) == -1) {
return false;
});Sollte der Benutzer die Seite nicht mit einem iPhone, Android, Windows Phone oder Blackberry aufrufen, wird der Link deaktiviert.
Zuletzt sollte der Link für Desktop-User auch optisch nicht als Link erkennbar sein. Das ist mit einer kleinen Erweiterung des jQuery-Codes möglich.
$('a[href^="tel:"], a[href^="fax:"], a[href^="sms:"]').click(function() {
if (navigator.userAgent.search(/(Android|iPhone|Windows Phone|Blackberry)/i) == -1) {
return false;
});
if (navigator.userAgent.search(/(Android|iPhone|Windows Phone|Blackberry)/i) == -1) {
$('a[href^="tel:"]').css({
color: $('body').css('color'), // Schriftfarbe des bodys übernehmen
textDecoration: 'none' // Unterstreichung unterdrücken
});
$('a[href^="tel:"]').mouseenter(function() {
$(this).css({
cursor: 'text' // Cursor beim Hover-State auf text setzen
});
});
}