Wenn du für Safari auf dem Handy gestaltest und deine Telefonnummern plötzlich blau und unterstrichen sind, bist du nicht allein. Standardmäßig erkennt Safari Telefonnummern automatisch und macht daraus klickbare Links — dabei überschreibt es oft deine CSS-Stile.
Das Problem
Die automatische Telefonnummer-Erkennung von Safari ist in manchen Fällen hilfreich. Für Designer und Entwickler kann sie aber das geplante Layout oder die Markenkonsistenz stören — vor allem, wenn du mit eigenen Schriften oder Farbschemas arbeitest.
Die einfache Lösung
Die gute Nachricht: Du kannst dieses Verhalten mit nur einer Codezeile in deinem <head>-Tag ausschalten:
<meta name="format-detection" content="telephone=no">
Damit weist du Safari an, Telefonnummern nicht automatisch zu erkennen und zu formatieren. So behältst du die volle Kontrolle darüber, wie Zahlen auf deiner Website aussehen.
Profi-Tipp
Wenn die Nummern trotzdem klickbar sein sollen, aber in deinem eigenen Stil, kannst du sie manuell in <a href=“tel:1234567890″>-Tags packen und dein eigenes CSS anwenden:
<a href="tel:1234567890" class="phone">(123) 456-7890</a>
Anschließend gestaltest du sie ganz nach Wunsch:
.phone {
color: inherit;
text-decoration: none;
font-weight: 600;
}
Fazit
Die Auto-Erkennung von Safari kann für Nutzer hilfreich, für Designer aber störend sein. Mit einem einfachen Meta-Tag oder gezieltem Styling verhinderst du ungewollte Designänderungen und hältst die Oberfläche in allen Browsern einheitlich.
Weitere schnelle Entwickler-Tipps wie diesen findest du auf identitydesign.us