Rufnummer wird auf Website ausgeblendet

Folgendes Szenario ist die Tage aufgetreten, ein Kunde kontaktierte uns und sagte das die Rufnummern unter Kontakt auf seinem Handy nicht mehr sichtbar wären. Seltsamerweise werden sie aber im normalen Browser auf einer Workstation oder Notebook angezeigt. Also scheint es ein Problem mit mobilen Endgeräten zu sein. Nach einigen Tests stellte sich heraus, das der Safari Browser unter iOS Rufnummern eigenständig formatiert, weil er diese anbietet in die Kontakt einzufügen.

Die Krux bei der Sache ist, das die Funktion, Rufnummern automatisch zu erkennen prinzipiell gut ist, aber die damit verbundene Formatierung dieser Rufnummern zu Problemen führen kann.
Im konkreten Fall wurde der Rufnummern String in weiß formatiert, da der Hintergrund ebenfalls weiß definiert war, war somit die Rufnummer nicht mehr sichtbar.

Es gibt zwei Möglichkeiten dieses Problem zu beheben:

A. Deaktivieren der automatischen Erkennung im Safari unter iOS

Dies ist mit einer simplen META Anweisung möglich, die vom Safari Browser verstanden wird:

<meta name="format-detection" content="telephone=no" />

Offizielle Informationen zu der Apple META Anweisung gibt es in der iOS Developer Library / Phone Links.

B. Formatierung für Rufnummern hinzufügen.

Wo kam das Weiß her? Auf besagter Seite war der Standardverweis a mit der Farbe Weiß definiert. Da die Rufnummer keine eigene Formatierung hatte, wurde eine automatisch hinzugefügt und der Standardwert übernommen. Damit dies nicht passiert muss anscheinend ein Rufnummern String eine eigene Formatierung erhalten und optimaler weise natürlich konform:

<a href="tel:+491234567890" id="01234567890" class="fon">
0123/456789-0</a>

Und schon war das Problem vorerst gelöst, nichts musste deaktiviert werden, sondern es wurde einfach etwas hinzugefügt.

Wenn ihr noch andere Lösungen oder Ideen dazu habt, bin ich über jeden weiteren Lösungsansatz dankbar.

Advertisements

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s