Telefonnummer als Link für Smartphones

Mit Hilfe eines simplen HTML-Tags ist es möglich, auf Smartphones die Telefonnummer als Link anzeigen zu lassen. Per „Klick“ (oder besser gesagt: Berührung) lässt sich so die verlinkte Telefonnummer anrufen. Auch kannst du an die genannte Nummer eine SMS verschicken. In diesem Artikel zeige ich dir, wie das funktioniert.

 

Telefonnummer als Link

Um eine Telefonnummer (oder auch einen beliebigen Text) als Link zu maskieren, gibt es in HTML die nachstehenden Möglichkeiten.

 

Beispiel:

<a href="tel:+492331555555">Rufen Sie uns an</a>
<a href="sms:+492331555555">Schicken Sie uns eine SMS</a>

 

Weitere Anpassung mit CSS für Desktop-Browser

Der Telefon-Link erscheint jedoch nicht nur in Smartphones, sondern auch im Desktop-Browser. Auf dem normalen Rechner ist der Link jedoch nicht anklickbar. Es passiert dann nichts, wenn man auf einen solchen Link klickt.

Um dieses Problem zu vermeiden, gibt es verschiedene Möglichkeiten. Die sicherlich einfachste Möglichkeit wäre, seinen Telefon-Link nur auf speziellen, für mobile Geräte ausgelegte, Seiten anzuzeigen. Wenn man keine mobile Version seiner Webseite anbietet, kann man auch mit Hilfe von CSS den Link auf normalen Desktops verstecken.

 

Beispiel:

a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {
 text-decoration: none;
 color: #000;
}

 

Nun das Ganze noch für Smartphones wieder anders gestalten:

 

Beispiel:

@media only screen and (max-device-width: 960px) {
 a[href^="tel"]:link,
 a[href^="tel"]:visited,
 a[href^="tel"]:hover {
 text-decoration: underline;
 color: blue;
   }
}

(Hinweis: Wenn du den SMS-Link einsetzen möchtest, musst du den Code Schnipsel abändern)

Hinweis

Die meisten Smartphones erkennen Telefonnummern auch automatisch. Du musst also nicht zwingend eine Telefonnummer als Link definieren. Wichtig ist es, wenn du Wörter als Telefon-Link definieren möchtest.

 


Dir gefällt dieser Artikel?

2 Gedanken zu „Telefonnummer als Link für Smartphones

  • 26. Juli 2017 um 22:39
    Permalink

    Für Whatsapp wäre es auch noch sehr interessant 🙂
    Vielen Dank dafür 🙂

    Antwort
  • 17. März 2017 um 18:12
    Permalink

    Danke für den hilfreichen tipp, hatte meine handy nummer nie verlinkt gehabt und habe es jetzt bei mir getan und bin damit sehr zufrieden.

    Kleine Veränderungen helfen schon weiter.

    mfg Paul

    Antwort

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.