Linkfarbe von Telefonnummern auf Websites in iPhone / iOS anpassen
Sie haben eine Website gestaltet und eine Telefonnummer direkt mit einem Link eingebunden, allerdings wird auf dem iPhone oder in iOS die Standardlinkfarbe genutzt und nicht die eigene CSS-Anpassung genutzt?
<a class="phonecall" href="+49171123456789">0171123456789</a>
Gibt es eine Möglichkeit das blaue Styling von Telefonnummern auf dem iPhone oder in iOS zu verhindern und die eigene CSS-Klasse zu nutzen?
Ja, da gibt es zwei Möglichkeiten.
Meta Tag format-detection festlegen
Fügen Sie den folgenden Code zwischen <head> und </head> in Ihrer Website ein:
<meta name="format-detection" content="telephone=no">
Dann kann man die Telefonnummer wie oben dargestellt verlinken und durch die CSS-Klasse das Styling anpassen.
Im Beitrag Automatische Nummern Verlinkung deaktivieren bei iOS gehen wir darauf etwas mehr ein.
CSS um das Styling von Telefonnummern auf iPhone / iOS anzupassen
Es gibt zwei praktikable Optionen für die Umsetzung.
CSS - Möglichkeit 1
Rufnummer Linkverknüpfungen mit href, beginnend mit tel können durch folgenden CSS-Code angepasst werden:
a[href^="tel"] {
color: inherit; /* Inherit text color of parent element. */
text-decoration: none; /* Remove underline. */
/* Additional css `propery: value;` pairs here */
}
Die Funktionalität der Rufnummer bleibt erhalten.
Die Styling Eigenschaften können Sie beliebig anpassen.
CSS - Möglichkeit 2
Bei der Verwendung des folgenden Codes können Sie das Styling ebenso anpassen:
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
Wir empfehlen die CSS Möglichkeit 1.
