HTML/Tutorials/Links/klickbare Telefonnummern
- 10min
- einfach
Du kannst Benutzern mobiler Geräte entgegenkommen, wenn man Telefonnummern auf deiner Webseite als Link veröffentlicht. Damit können diese Benutzer die Nummer einfach anklicken, anstatt die Nummer eingeben zu müssen.
Telefon-Verweise beginnen immer mit tel: (und ohne // dahinter). Der Verweis ist bei Anwendern nur ausführbar, wenn der Web-Browser das automatische Wählen unterstützt. Es ist sinnvoll, im Verweistext die Telefonnummer noch einmal explizit zu nennen.
automatische Markierung von Telefonnummern steuern
Browser in mobilen Umgebungen versuchen, Telefonnummern zu erkennen und markieren diese entsprechend, sodass durch Klick oder Tap ein Programm geöffnet wird, das eine Telefonverbindung herstellt. Dieses Verhalten kann man steuern.
Erlaubt sind die beiden content-Werte telephone=yes und telephone=no. Du solltest die Erkennung von Telefonnummern nur unterbinden, falls auf deiner Seite viele Zahlen vorhanden sind, die fälschlicherweise als Telefonnumern erkannt werden.
Mithilfe dieses Attributs lässt sich die Formaterkennung für einzelne Elemente gezielt steuern.
Telefonnummer als QR-Code
Damit Anwender, die vor einem Monitor sitzen, noch schneller mit ihren mobilen Geräten auf eine Telefonnummer zugreifen können, kann man diese in einen QR-Code einbetten. Viele Smartphones mit Android oder iOS können QR-Codes allein mit ihrer Kamera-App auslesen, die als Standard mitgeliefert wird.
Den eigentlichen QR Code zu generieren ist eine Aufgabe, für die es diverse Online-Dienstleister gibt. Eine Auswahl findet man beispielsweise im Weblinks-Verzeichnis des QR-Code Artikels in der Wikipedia (abgerufen am 02.12.2022).
Das nachfolgende Beispiel verwendete den Generator von Loresoft, weil sich damit besonders kleine QR-Code Grafiken erstellen lassen, in denen ein Punkt des QR-Code Musters nur ein einziges Pixel einnimmt. Die dort generierte PNG Datei wurde als 192 Bytes große PNG-Datei gespeichert und dann über einen Data-URI Generator laufen gelassen. Das Ergebnis ist eine 23x23 Pixel große Grafik, die als PNG 192 Bytes groß ist und als base64-codierte Data-URI lediglich 278 Stellen lang ist.
img {
image-rendering: pixelated;
width: 7em;
}
figure {
width: max-content;
text-align: center;
}
<h1>Ruf! Mich! An!</h1>
<p>24h erreichbar:</p>
<figure>
<img src="data:image/png;base64,iVBO...YII=">
<figcaption><a href="tel:+499123456789">+49-9123-456789</a></figcaption>
</figure>
Die Grafik ist nur 23x23 Pixel groß, wird aber durch die width-Angabe deutlich größer angezeigt. Normalerweise würde der Browser dafür das Ergebnis weichzeichnen (Anti-Aliasing), so dass kein QR-Code Reader dieser Welt noch etwas damit anfangen könnte, aber mithilfe der CSS-Eigenschaft image-rendering lässt sich das Anti-Aliasing deaktivieren und die Vergrößerung ist knackscharf. Diese Eigenschaft ist eine CSS-Übertragung des gleichnamigen SVG-Attributs, verwendet aber andere Werte!
Die vollständige Data-URI wurde für den Wiki-Artikel gekürzt. Schau in den Beispiel-Quellcode oder mit "ausprobieren" ins Frickl, wenn du die komplette URI sehen möchtest.
VoIP-Adresse
Möchte man anstelle einer Telefonnummer einen VoIP-Anbieter (wie früher Skype) nutzen, so schreibt man folgendes:
