labuero

< frontend developer >

Telefonnummern für mobile Geräte anpassen

Vor kurzem ging in unsere Firma der Hinweis rum, wie man Telefonnummern auf Webseiten so formatieren soll, damit Smartphones diese direkt erkennen und benutzen können.

Der Vorschlag besagte, dass man das kanonische Adressformat verwenden soll, um die automatische Erkennung von iPhone und Android zu gewährleisten.
Sieht dann so aus: + 49 211 123456

So richtig ideal finde ich diese Formatierung nicht, zumal man Durchwahlnummer nicht, durch z.B. einen Bindestrich, abheben kann. Bei einem Test auf meinem Smartphone mit Android 2.3 und im Standardbrowser hat es außerdem nicht funktioniert. Keine Schreibweise hat den gewünschten Effekt gebracht. Wenn eine Nummer erkannt wurde, dann fehlte immer die Ländervorwahl, während auf einem iPad lediglich ein / zur Trennung der Vorwahl  die Nummernerkennung ausgehebelt hat. Der Opera Mini Browser hat sich unter Android dagegen schon besser geschlagen und die Nummern zum Großteil richtig erkannt. Leider fehlte hier eine Markierung der identifizierten Nummer die dem Benutzer anzeigt, dass er diese direkt nutzen kann.


Eine andere Möglichkeit den schlauen Telefonen eine Nummer schmackhaft zu machen besteht darin, die formatierte Telefonnummer in einen Link zu packen und über das href Attribut die korrekte Nummer zu übergeben.

<a href="tel:+49211123456"> 0211 / 12 34 56</a>

Das habe ich so im blog von Linkwerk gefunden. Zum Artikel
Da die normalen Browser mit dem Präfix „tel“ nichts anfangen können, passiert entweder nichts oder sie werfen eine Fehlermeldung. Der Vorschlag per CSS den Link auf Desktopsystemen nichts als solchen zu makieren und den typische Unterstrich per Media Queries erst bei kleinen, also Smartphone typischen Auflösungen anzuzeigen, ist im Ansatz schon mal, nun ja, ganz nett, geht mir aber nicht weit genug. Der Link bleibt in dem Fall immer noch vorhanden und beim überfahren mit der Maus kann es passieren, dass dann schnell doch ein Klick ausgelöst wird.

Eine Lösung per Javascript zu schaffen wäre schnell möglich aber ich wollte das ganze nur per CSS lösen, weswegen ich den Ansatz von Linkwerk etwas modifiziert habe.
Nachteil ist, dass man dafür die Nummer zweimal schreiben muss. Einmal für Desktop und einmal mit Link für mobile Geräte.

   <span class="tel-desktop">0211 / 12 34 56</span><a class="tel-mobile" href="tel:+49211123456"> 0211 / 12 34 56</a>

Die Idee ist nun ganz einfach: Per CSS wird Standardmässig die Telefonnummer mit der Klasse tel-desktop ein und die in einen Link verpackte Telefonnummer tel-mobile ausgeblendet. Sobald der Media Query greift wird es genau umgekehrt.

  .tel-mobile  { display:none;}
  .tel-desktop { display:inline-block;}

@media only screen and (max-width: 480px) {
	.tel-mobile { display:inline-block;}
        .tel-desktop{ display:none;}
}

2 Kommentare

  1. Peter

    Diese Lösung betrifft allerdings nur die Präsentation. Beide Angaben sind jedoch nach wie vor im Quelltext enthalten.

    Für alternative Ausgabegeräte kann das vermeidbare Redundanz bedeuten.

    Besser erscheint mir eine php-basierte Lösung, die in Abhängigkeit des UA den entsprechenden Abschnitt ausliefert.

    Noch einfacher ist es jedoch, sich auf einen der kleinsten gemeinsamen Nenner beim Rufnummernformat einzulassen:

    http://www.barrierefreie-webloesungen.de/blog/misc/120413_telefon.php

  2. Maxim

    Eine einwandfreie schlanke Lösung, die ich nun schon auf zwei meiner Webseiten (auch um unterschiedliche Grafiken aufzurufen) einsetze und die einwandfrei funktioniert.
    Besten Dank dafür!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.